/* =============================================================================
   DESIGN TOKENS — The Witchy Room
   Single source of truth for all CSS custom properties.
   All values derived from BRIEF.md design system.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     Colour palette
     --------------------------------------------------------------------------- */
  --color-bg:      #060712;
  --color-surface: #151726;
  --color-violet:  #9D7BFF;
  --color-pink:    #FF7BD9;
  --color-gold:    #F6D88A;
  --color-teal:    #4ED2C5;
  --color-text:    #F7F3FF;
  --color-muted:   #A7A6BC;

  /* Semantic aliases */
  --color-border:          rgba(157, 123, 255, 0.2);
  --color-border-hover:    rgba(157, 123, 255, 0.6);
  --color-surface-raised:  rgba(255, 255, 255, 0.04);

  /* ---------------------------------------------------------------------------
     Gradients
     --------------------------------------------------------------------------- */
  --gradient-primary: linear-gradient(135deg, #9D7BFF, #FF7BD9);
  --gradient-gold:    linear-gradient(135deg, #F6D88A, #FF7BD9);
  --gradient-teal:    linear-gradient(135deg, #4ED2C5, #9D7BFF);

  /* ---------------------------------------------------------------------------
     Glow / box-shadow tokens
     --------------------------------------------------------------------------- */
  --glow-sm: 0 0 16px rgba(157, 123, 255, 0.6);
  --glow-md: 0 0 22px rgba(157, 123, 255, 0.8);
  --glow-gold: 0 0 16px rgba(246, 216, 138, 0.5);
  --glow-teal: 0 0 16px rgba(78, 210, 197, 0.5);

  /* ---------------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------------- */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;

  --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 */

  /* ---------------------------------------------------------------------------
     Spacing scale
     --------------------------------------------------------------------------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 96px;

  /* ---------------------------------------------------------------------------
     Border radius
     --------------------------------------------------------------------------- */
  --radius-pill: 999px;
  --radius-card: 12px;
  --radius-sm:   4px;
  --radius-md:   8px;

  /* ---------------------------------------------------------------------------
     Transitions
     --------------------------------------------------------------------------- */
  --transition-fast:   150ms ease-out;
  --transition-base:   250ms ease-out;
  --transition-slow:   400ms ease-out;

  /* ---------------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 50;
  --z-header:  100;
  --z-modal:   200;
  --z-toast:   300;

  /* ---------------------------------------------------------------------------
     Breakpoints (reference only — use in media queries, not calc())
     Custom media queries require PostCSS; use these values directly in @media.

     --bp-sm:  480px   (large phones)
     --bp-md:  768px   (tablets)
     --bp-lg:  1024px  (small desktops)
     --bp-xl:  1280px  (wide desktops)
     --------------------------------------------------------------------------- */

  /* ---------------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------------- */
  --container-max: 1200px;
  --header-height: 64px;
}