/* ============================================
   STORY FORGE — Design Tokens
   ============================================ */
:root {
  /* === BACKGROUNDS === */
  --bg-void:      #080810;
  --bg-deep:      #0d0d1a;
  --bg-surface:   #12121f;
  --bg-elevated:  #1a1a2e;
  --bg-glass:     rgba(255, 255, 255, 0.04);
  --bg-glass-md:  rgba(255, 255, 255, 0.07);
  --bg-glass-lg:  rgba(255, 255, 255, 0.10);

  /* === ACCENTS === */
  --accent-primary:   #7c3aed;
  --accent-secondary: #a855f7;
  --accent-glow:      rgba(124, 58, 237, 0.4);
  --accent-glow-sm:   rgba(124, 58, 237, 0.2);
  --accent-gold:      #f59e0b;
  --accent-gold-glow: rgba(245, 158, 11, 0.3);
  --accent-rose:      #f43f5e;
  --accent-teal:      #14b8a6;
  --accent-teal-glow: rgba(20, 184, 166, 0.3);

  /* === TEXT === */
  --text-primary:   #f1f0ff;
  --text-secondary: #a9a8c8;
  --text-dim:       #5f5e85;
  --text-accent:    #c084fc;
  --text-invert:    #080810;

  /* === STORY READER — dialogue & thought colors === */
  --dialogue-text:    #dfd8f5;
  --attribution-text: #8070a8;
  --thought-text:     #b0a8cc;

  /* === BORDERS === */
  --border-subtle:  rgba(124, 58, 237, 0.12);
  --border-medium:  rgba(124, 58, 237, 0.25);
  --border-bright:  rgba(124, 58, 237, 0.5);
  --border-glass:   rgba(255, 255, 255, 0.08);

  /* === GENRE COLORS === */
  --genre-fantasy:    #7c3aed;
  --genre-scifi:      #0ea5e9;
  --genre-romance:    #ec4899;
  --genre-horror:     #dc2626;
  --genre-mystery:    #6366f1;
  --genre-adventure:  #f59e0b;
  --genre-historical: #78716c;
  --genre-comedy:     #22c55e;

  /* === SPACING === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* === BORDER RADIUS === */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-subtle);
  --shadow-glow:  0 0 40px var(--accent-glow), 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border-glass);
  --shadow-nav:   0 1px 0 var(--border-glass);

  /* === TYPOGRAPHY === */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* === TRANSITIONS === */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --focus-transition:  300ms ease;

  /* === Z-INDEX === */
  --z-base:        1;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-overlay:     300;
  --z-modal:       400;
  --z-toast:       500;
}