/* ==========================================================================
   Design Tokens — Mana Reserve
   All CSS custom properties in one place.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------------- */
    /* Museum Darks                                                             */
    /* ---------------------------------------------------------------------- */
    --color-obsidian:      #1C1C18;
    --color-vault:         #2A2A22;
    --color-vault-raised:  #333328;
    --color-charcoal:      #313131;

    /* ---------------------------------------------------------------------- */
    /* Olive Greens                                                             */
    /* NOTE: olive-deep and olive-mid FAIL WCAG AA contrast on dark bg.        */
    /* Use them for borders/decorative elements only — never body text.        */
    /* ---------------------------------------------------------------------- */
    --color-olive-deep:    #6B6A4E;   /* borders only */
    --color-olive-mid:     #8B8B5A;   /* borders, large decorative text */
    --color-olive-light:   #A8A870;   /* large text ≥18px (5.8:1 ratio) */
    --color-olive-pale:    #C4C48C;

    /* ---------------------------------------------------------------------- */
    /* Warm Stone / Marble                                                      */
    /* ---------------------------------------------------------------------- */
    --color-stone-dark:    #BFB59A;
    --color-stone-mid:     #D4CDB8;
    --color-stone-light:   #E8E4D4;
    --color-parchment:     #F5F3EE;

    /* ---------------------------------------------------------------------- */
    /* Accent Gold                                                              */
    /* ---------------------------------------------------------------------- */
    --color-gold:          #C9A84C;
    --color-gold-deep:     #B8973A;
    --color-gold-pale:     #E8D080;

    /* ---------------------------------------------------------------------- */
    /* Brand Purples (replaces blues — #9b51e0 is the existing brand colour)   */
    /* ---------------------------------------------------------------------- */
    --color-purple:        #9b51e0;
    --color-purple-dark:   #7c3cbf;
    --color-purple-deeper: #5e2d99;
    --color-purple-light:  #b575f0;
    --color-purple-muted:  #6b4080;
    --color-purple-abyss:  #300A36;   /* deep velvet — from previous site */

    /* ---------------------------------------------------------------------- */
    /* Semantic / role-based tokens                                             */
    /* ---------------------------------------------------------------------- */
    --color-bg:            var(--color-obsidian);
    --color-surface:       var(--color-vault);
    --color-surface-raised:var(--color-vault-raised);
    --color-border:        var(--color-olive-deep);
    --color-border-subtle: rgba(107, 106, 78, 0.4);

    /* Text — all pass WCAG AA on --color-obsidian */
    --color-text-primary:   var(--color-parchment);     /* 14.5:1 */
    --color-text-secondary: var(--color-stone-mid);     /*  7.8:1 */
    --color-text-muted:     var(--color-stone-dark);    /*  5.4:1 */

    --color-accent:        var(--color-gold);
    --color-cta:           var(--color-purple);
    --color-cta-hover:     var(--color-purple-dark);
    --color-link:          var(--color-purple-light);
    --color-link-hover:    var(--color-gold);

    /* Status */
    --color-success:  #5a9e6f;
    --color-warning:  #c9a84c;
    --color-error:    #c0392b;
    --color-info:     var(--color-purple-light);

    /* ---------------------------------------------------------------------- */
    /* Typography                                                               */
    /* ---------------------------------------------------------------------- */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', Courier, 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-hero:  clamp(2.4rem, 4.5vw + 1rem, 4.8rem);

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-wider:  0.08em;
    --tracking-widest: 0.14em;

    /* ---------------------------------------------------------------------- */
    /* Spacing (4px base unit)                                                  */
    /* ---------------------------------------------------------------------- */
    --space-px:  1px;
    --space-0-5: 0.125rem;   /* 2px  */
    --space-1:   0.25rem;    /* 4px  */
    --space-2:   0.5rem;     /* 8px  */
    --space-3:   0.75rem;    /* 12px */
    --space-4:   1rem;       /* 16px */
    --space-5:   1.25rem;    /* 20px */
    --space-6:   1.5rem;     /* 24px */
    --space-8:   2rem;       /* 32px */
    --space-10:  2.5rem;     /* 40px */
    --space-12:  3rem;       /* 48px */
    --space-16:  4rem;       /* 64px */
    --space-20:  5rem;       /* 80px */
    --space-24:  6rem;       /* 96px */
    --space-32:  8rem;       /* 128px */

    /* ---------------------------------------------------------------------- */
    /* Layout                                                                   */
    /* ---------------------------------------------------------------------- */
    --container-sm:   640px;
    --container-md:   768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1440px;
    --container-pad: var(--space-6);

    --sidebar-width: 280px;
    --header-height: 72px;

    /* ---------------------------------------------------------------------- */
    /* Z-index layers — museum-aware scale                                      */
    /* ---------------------------------------------------------------------- */
    --z-below:       -1;
    --z-base:         0;
    --z-floor:        5;    /* museum floor plane */
    --z-colonnade:   10;    /* side columns — behind content */
    --z-content:     20;    /* hall section content */
    --z-pediment:    30;    /* pediment roof — above content */
    --z-raised:      10;    /* legacy alias */
    --z-header:      40;    /* entablature / site-header */
    --z-dropdown:   100;
    --z-overlays:    60;    /* search + mobile nav */
    --z-sticky:     200;    /* legacy alias for sticky header */
    --z-overlay:    300;
    --z-modal:      400;
    --z-toast:      500;

    /* ---------------------------------------------------------------------- */
    /* Transitions                                                              */
    /* ---------------------------------------------------------------------- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---------------------------------------------------------------------- */
    /* Shadows                                                                  */
    /* ---------------------------------------------------------------------- */
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.3);
    --shadow-card:       0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px var(--color-olive-deep);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px var(--color-olive-mid);
    --shadow-inset:      inset 0 2px 12px rgba(0,0,0,0.5);
    --shadow-gold-glow:  0 0 16px rgba(201,168,76,0.25);
    --shadow-purple-glow:0 0 16px rgba(155,81,224,0.3);

    /* ---------------------------------------------------------------------- */
    /* Border radii                                                             */
    /* ---------------------------------------------------------------------- */
    --radius-sm:   2px;
    --radius-base: 4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-full: 9999px;

    /* ---------------------------------------------------------------------- */
    /* Museum frame — persistent architectural overlay                          */
    /* ---------------------------------------------------------------------- */
    --entablature-height:   84px;   /* header height (up from 72px) */
    --pediment-height:     120px;   /* apex triangle + rail combined */
    --cartouche-width:     160px;   /* logo oval housing width */
    --cartouche-height:     52px;   /* logo oval housing height */
    --parade:                 0;    /* GSAP-driven: 0→600 over full page scroll */

    /* Column dimensions */
    --museum-column-width:  80px;  /* wider for visibility as background watermark */
    --museum-column-gap:    32px;

    /* Colours */
    --color-mahogany:  #3D2B1F;     /* curator's desk wood grain */
    --color-marble-vein: rgba(255,255,255,0.06); /* marble vein highlight */

    /* ---------------------------------------------------------------------- */
    /* Legacy hero perspective (kept for compatibility during transition)       */
    /* ---------------------------------------------------------------------- */
    --hero-perspective:     1200px;
    --column-depth:         -280px;
    --column-spread-left:   -340px;
    --column-spread-right:   340px;
    --column-rotate:         14deg;
    --column-width:          52px;
    --column-height:         78%;
}