/* ==========================================================================
   Psychic Visions AI — CSS Custom Properties
   LOCKED brand colors — DO NOT EDIT
   ========================================================================== */

:root {
  /* ── Primary Palette (LOCKED) ─────────────────────────────── */
  --color-bg:            #0A0614;
  --color-purple:        #6B2FA0;
  --color-violet:        #9B4DCA;
  --color-blue:          #4169E1;
  --color-gold:          #D4A843;
  --color-gold-light:    #F5D77A;
  --color-card:          #140E24;
  --color-border:        #2A1845;
  --color-surface:       #1A0E30;
  --color-muted:         #9B8FC7;
  --color-dim:           #6B5E9B;
  --color-darkest:       #4A3F6B;
  --color-white:         #FFFFFF;

  /* ── Typography ──────────────────────────────────────────── */
  --font-heading: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing Scale (4px base) ────────────────────────────── */
  --space-2xs: 0.25rem;   /*   4px */
  --space-xs:  0.5rem;    /*   8px */
  --space-sm:  0.75rem;   /*  12px */
  --space-md:  1rem;      /*  16px */
  --space-lg:  1.5rem;    /*  24px */
  --space-xl:  2rem;      /*  32px */
  --space-2xl: 3rem;      /*  48px */
  --space-3xl: 4rem;      /*  64px */
  --space-4xl: 6rem;      /*  96px */

  /* ── Layout ──────────────────────────────────────────────── */
  --content-max:    1200px;
  --content-narrow: 800px;
  --content-wide:   1400px;
  --nav-height:     4.5rem;
  --section-pad-x:  clamp(1rem, 5vw, 3rem);

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-xl:   0 24px 80px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 40px rgba(212, 168, 67, 0.25);
  --shadow-violet: 0 0 50px rgba(107, 47, 160, 0.3);
  --shadow-blue: 0 0 40px rgba(65, 105, 225, 0.2);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-glacial: 800ms;

  /* ── Z-index layers ──────────────────────────────────────── */
  --z-stars:   0;
  --z-content: 1;
  --z-nav:     10;
  --z-overlay: 20;
  --z-modal:   30;
}