/* ============================================================================
   tokens.css — Design tokens (the single source of truth for the brand system)
   ----------------------------------------------------------------------------
   Edit colours, fonts, spacing and radii HERE and they cascade everywhere.
   Loaded FIRST, before every other stylesheet.

   BRAND RULE (Saba Global Ventures) — "Indigo & Gold, the Bengal trade house":
     - Majestic/Royal blue is the canvas, deepened toward INDIGO. Indigo is not
       decoration here: it is the dye Bengal traded to the world. It earns the
       palette.
     - Gold is jewelry: <=10% of any view. Lines, eyebrows, CTAs, the emblem.
     - IVORY is the second canvas. The site must BREATHE — deep indigo chapters
       alternating with warm ivory ones. An unbroken dark slab reads as a
       template; the alternation is what reads as editorial and expensive.
     - TERRACOTTA is the rare spark — the fired clay of Bengal's temple panels.
       Never more than a chip, a rule, a numeral.
     - Ocean blue is the "current" — motion, trade routes, water, glows.
   ========================================================================== */

:root {
  /* ---- Midnight Navy (the canvas) -------------------------------------
     The house palette, fixed by the client: Midnight Navy #081B45 is THE
     ground. Everything dark is built as a tight, cohesive scale around it —
     no near-black, no violet drift. One deep, confident navy, the way a
     Louis-Vuitton catalogue commits to one ink. (Token names kept as
     --indigo-* so the whole cascade keeps working.) */
  --indigo-950: #050F2C;   /* deepest ground — below the navy, for vignettes */
  --indigo-900: #081B45;   /* MIDNIGHT NAVY — the base canvas */
  --indigo-800: #0D2559;   /* raised navy surfaces */
  --indigo-700: #143171;   /* navy cards / gradients */

  /* ---- Ivory & natural (the light chapters) ---------------------------
     Warm Ivory #F7F2E8 is the paper; Rice White #FDFBF6 the lightest leaf. */
  --rice-white: #FDFBF6;  /* Rice White — the lightest paper */
  --ivory-100: #F7F2E8;   /* WARM IVORY — the light canvas */
  --ivory-200: #EFE7D6;   /* raised ivory panels */
  --ivory-300: #E2D5BC;   /* ivory dividers, hairlines on light */
  --clay-600:  #A85A2A;   /* TERRACOTTA ACCENT — fired-clay spark */
  --clay-400:  #C57A4C;   /* terracotta hover/tint */
  --paddy-600: #597A3A;   /* PADDY GREEN — the natural, growing accent */
  --paddy-500: #6E9349;   /* paddy hover/tint */
  /* ---- Blues (canvas + surfaces) --------------------------------------
     All anchored to Midnight Navy so the dark chapters read as ONE ink, with
     ocean blue kept only as the faint "current" in motion/glows. */
  --navy-950:  #040B22;   /* deepest — footer, preloader, vignette core */
  --navy-900:  #061436;   /* deep background wash */
  --blue-900:  #081B45;   /* PRIMARY brand surface — Midnight Navy */
  --blue-800:  #0E2A63;   /* dark blue sections, gradients */
  --royal-700: #143171;   /* deep royal — cards on dark */
  --royal-600: #1E4FA8;   /* royal accent (calmed, not electric) */
  --ocean-500: #1D6AAE;   /* ocean — currents, routes, links */
  --ocean-400: #3E93C9;   /* bright ocean — icon tints, glows */
  --powder-300:#A9CFEA;   /* Powder Blue — soft highlights */
  --powder-200:#CFE4F5;   /* powder panels */
  --powder-100:#EDF4FB;   /* light section background */

  /* ---- Golds (the jewelry — Royal Gold #C8A24A) -----------------------
     RESTRAINED. Antique, not shiny; the highlight stays warm, never bleaches
     to near-white, so gold reads as gilt metal, not chrome. */
  --gold-700: #8C6C1E;    /* gold shadow / engrave */
  --gold-500: #C8A24A;    /* PRIMARY gold — Royal Gold, lines, eyebrows, CTAs */
  --gold-300: #D8BD72;    /* restrained hover gold */
  --gold-100: #E9DBB2;    /* gold text on very dark, highlights */
  --gold-metallic: linear-gradient(135deg,#9E7A26,#D2BA6E,#C8A24A,#AE8A32,#8C6C1E);

  /* ---- Neutral + light ------------------------------------------------ */
  --frost-100: #F2F7FD;   /* text on dark, light section bg */
  --mist:      #DDE7F2;   /* dividers, subtle fills on light */
  --ink-900:   #050C1C;   /* text on light */
  --ink-600:   #3D4C63;   /* body text on light */
  --line:      rgba(201,162,75,.22);   /* gold hairline @ low alpha */
  --line-blue: rgba(169,207,234,.16);  /* powder hairline @ low alpha */

  /* ---- Semantic aliases ----------------------------------------------- */
  --bg:            var(--indigo-900);
  --bg-deep:       var(--indigo-950);
  --surface-card:  var(--indigo-700);
  --text-on-dark:  var(--frost-100);
  --text-muted-on-dark: rgba(242,247,253,.70);
  --text-on-light: var(--ink-900);
  --text-muted-on-light: #6B6255;   /* warm grey — reads as ink on paper */
  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-300);
  --line-ivory:    rgba(90,74,48,.18);   /* hairline on the light chapters */

  /* ---- Shape language --------------------------------------------------
     The Bengal cusped arch lives in assets/img/ornaments/ and is applied as a
     CSS mask so any box can become an arched niche: the hero portal, the
     product "portraits", framed imagery. That one move is the site's signature.

     ⚠ DO NOT put those url()s in a custom property here. A relative url() inside
     a custom property is resolved against the stylesheet that *uses* the var,
     not the one that declares it — so `../img/…` silently became
     `assets/css/img/…` when used from assets/css/sections/*.css, and a mask
     whose image fails to load masks the element away ENTIRELY (the portal went
     blank). Browsers also disagree here. Each stylesheet therefore spells the
     path out itself, at its own depth. */

  /* ---- Typography -----------------------------------------------------
     Cormorant Garamond at LIGHT weights and LARGE sizes is the luxury move —
     high stroke contrast, generous air. Marcellus carves the wordmark.
     Manrope keeps the UI modern and legible. */
  --font-display:  "Cormorant Garamond", "Times New Roman", serif;
  --font-wordmark: "Marcellus", "Cormorant Garamond", serif;
  --font-serif:    "Cormorant Garamond", Georgia, serif;
  --font-body:     "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (clamp). Display runs large because Cormorant is airy;
     body stays restrained. Whitespace beats big fonts. */
  --fs-h1:      clamp(2.9rem, 6.2vw, 5.6rem);
  --fs-h2:      clamp(2.1rem, 4vw, 3.6rem);
  --fs-h3:      1.6rem;
  --fs-lead:    1.3rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-heading: 1.04;     /* tight — Cormorant has lots of built-in air */
  --lh-body:    1.5;      /* compacted from 1.7 — tighter lines, ~15% less height */
  --measure:    68ch;
  --tracking-eyebrow: 0.22em;

  /* ---- Spacing scale (8pt-ish) ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2rem;
  --space-8: 2.6rem;
  --space-9: 3.6rem;
  --section-pad: clamp(1.6rem, 3.4vw, 3rem);   /* compacted ~35% for a tighter page */

  /* ---- Layout --------------------------------------------------------- */
  --container:        1240px;
  --container-narrow: 880px;
  --gutter:           clamp(1rem, 4vw, 2.5rem);

  /* ---- Radii ---------------------------------------------------------- */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- Shadows / glows ------------------------------------------------ */
  --shadow-card: 0 10px 30px -12px rgba(1,5,18,.55);
  --shadow-lift: 0 22px 48px -18px rgba(1,5,18,.65);
  --glow-gold:   0 0 0 1px var(--line), 0 8px 28px -10px rgba(201,162,75,.38);
  --glow-ocean:  0 0 0 1px var(--line-blue), 0 10px 34px -12px rgba(62,147,201,.35);  /* --ocean-400 */

  /* ---- Feedback / status colours -------------------------------------- */
  --error:      #E86A6A;                 /* form errors, invalid fields */
  --error-soft: #FF9B9B;                 /* error text on very dark surfaces */
  --error-line: rgba(232,106,106,.5);    /* invalid field border */

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ~power3.out */
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 600ms;

  /* ---- Z-index ladder ------------------------------------------------- */
  --z-bg:        -1;
  --z-grain:     0;
  --z-content:   1;
  --z-header:    50;
  --z-dock:      60;
  --z-overlay:   90;
  --z-cursor:    100;
  --z-preloader: 120;
}

/* Honour reduced motion globally by zeroing durations (JS also checks this). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}