/* ============================================================
   ARHAN SCENTIMENTS — FINAL DESIGN TOKEN SYSTEM (Step 02)
   ------------------------------------------------------------
   Brand world: INK · IVORY · WARM GOLD.
   Gold accents sampled from the official logo (#ECC454 family).
   Rules:
   - Components must use semantic tokens, never raw hex.
   - Gold alpha tiers: veil (wash) < tint (chip/selected) < line
     (border). Text-safe gold only for text on light surfaces.
   - Ink/paper ramps are deliberate 3–5 step families.
   ============================================================ */

:root {
  /* ---- Ink / dark surfaces (deep → elevated) ---- */
  --ink: #0b0b0c;          /* page base / hero */
  --ink-2: #121214;        /* elevated dark surface (header, drawers) */
  --ink-3: #19191d;        /* raised panel / dark card */
  --ink-4: #232329;        /* dark hover surface */
  --ink-5: #2e2e35;        /* dark line / deepest hover */
  --ink-glass: rgba(18, 18, 20, 0.97); /* translucent header/scroll glass */

  /* ---- Paper / light surfaces (warm editorial ivory) ---- */
  --paper: #f4efe6;        /* primary paper */
  --paper-2: #eae3d4;      /* deeper tint band */
  --paper-3: #fbf8f2;      /* elevated / soft card paper */

  /* ---- Brand gold hierarchy ---- */
  --gold: #e9c766;         /* GOLD ACCENT — decoration, borders, icons, focus on ink */
  --gold-bright: #f1cf7e;  /* GOLD STRONG — hover / emphasis (warmer, less yellow) */
  --gold-deep: #c9a24b;    /* GOLD MUTED — pressed, deep hairlines, dark-on-gold text */
  --gold-text: #7d6023;    /* GOLD TEXT-SAFE — readable gold on paper (≥4.5:1) */
  --champagne: #f1e3bd;    /* soft light gold (light surfaces only) */

  /* ---- Gold alpha tiers (single source for transparent golds) ---- */
  --gold-veil: rgba(233, 199, 102, 0.07);  /* background wash */
  --gold-tint: rgba(233, 199, 102, 0.15);  /* chips, selected fills, subtle rings */
  --gold-line: rgba(233, 199, 102, 0.28);  /* gold hairlines / dividers on dark */
  --gold-soft: rgba(233, 199, 102, 0.14);  /* legacy alias of tint (kept) */
  --goldtext-veil: rgba(125, 96, 35, 0.07); /* wash of text-safe gold on paper */
  --line-gold-ink: rgba(125, 96, 35, 0.32); /* gold-text hairline on paper */

  /* ---- Text on dark ---- */
  --tx-dark-1: #f2ede2;                    /* primary */
  --tx-dark-2: rgba(242, 237, 226, 0.75);  /* secondary */
  --tx-dark-3: rgba(242, 237, 226, 0.55);  /* muted (legible floor) */
  --tx-dark-disabled: rgba(242, 237, 226, 0.35);

  /* ---- Text on paper ---- */
  --tx-light-1: #16151a;                   /* primary */
  --tx-light-2: #55504a;                   /* secondary */
  --tx-light-3: #6b655c;                   /* muted (~4.6:1 on paper) */
  --tx-light-disabled: rgba(22, 21, 26, 0.35);

  /* ---- Lines / hairlines (1px standard; 2px = selected/focus only) ---- */
  --line-dark: rgba(233, 199, 102, 0.2);   /* standard hairline on ink */
  --line-dark-2: rgba(233, 199, 102, 0.42);/* strong hairline / selected on ink */
  --line-light: rgba(22, 21, 26, 0.14);    /* standard hairline on paper */
  --line-light-2: rgba(22, 21, 26, 0.28);  /* strong hairline on paper */

  /* ---- Status (restrained, contrast-checked on paper) ---- */
  --ok: #46714b;           /* ≥4.5:1 on paper */
  --ok-bg: rgba(70, 113, 75, 0.1);
  --warn: #846618;         /* ≥4.5:1 on paper */
  --warn-bg: rgba(176, 138, 46, 0.12);
  --err: #a6473e;          /* ≥5:1 on paper — errors must read as errors */
  --err-bg: rgba(166, 71, 62, 0.09);

  /* ---- Focus foundation (dual-tone: works on ink AND paper) ---- */
  --focus-ring: var(--gold);              /* visible against ink / dark halo */
  --focus-halo: rgba(11, 11, 12, 0.45);   /* dark halo so the gold ring reads on paper */

  /* ---- Overlays ---- */
  --scrim: rgba(5, 5, 6, 0.72);           /* standard overlay scrim */
  --scrim-soft: rgba(5, 5, 6, 0.55);      /* media viewer / soft scrim */

  /* ---- Type families (typography scale handled in Step 03) ---- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* ---- Type scale (unchanged in this step) ---- */
  --fs-display: clamp(2.7rem, 6.2vw, 5.4rem);
  --fs-h1: clamp(2.2rem, 4.4vw, 3.5rem);
  --fs-h2: clamp(1.85rem, 3.2vw, 2.75rem);
  --fs-h3: clamp(1.4rem, 2.1vw, 1.85rem);
  --fs-h4: clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 1.25vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.72rem;   /* micro-label floor raised in Step 03 (was 0.6875) */

  /* ---- Typography system (Step 03) ---- */
  --lh-display: 1.04;
  --lh-h1: 1.06;
  --lh-heading: 1.14;
  --lh-body: 1.65;
  --lh-reading: 1.75;
  --ls-display: -0.015em;
  --ls-h1: -0.01em;
  --ls-label: 0.14em;
  --ls-micro: 0.18em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;

  /* ---- Spacing scale (spacing handled in a later step) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 48px;
  --s10: 64px;
  --s11: 80px;
  --s12: 96px;
  --s13: 120px;
  --s14: 160px;

  /* ---- Layout (grid handled in a later step) ---- */
  --container: 1360px;
  --container-narrow: 860px;
  --container-wide: 1560px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 88px;
  --header-h-scrolled: 68px;
  --header-h-mobile: 64px;

  /* ---- Grid system (Step 04) ----
     --gutter: fluid viewport gutter (20→56px).
     --grid-x: standard horizontal column gap for card grids.
     --gap-2col: standard editorial 2-column split gap.
     Ratios are content-driven: PDP 1.12/0.88, Cart+Checkout 1.2/0.8,
     Guide 240px+1fr. Vertical rhythm belongs to Step 05. */
  --grid-x: clamp(14px, 1.8vw, 26px);
  --gap-2col: clamp(32px, 4.6vw, 72px);

  /* ---- Vertical rhythm (Step 05) ----
     Standard section rhythm for storytelling/discovery; tight for
     commerce/functional/legal surfaces. Desktop breathing retained,
     mobile floors reduced for comfortable pace. */
  --section-y: clamp(64px, 9vw, 140px);
  --section-y-tight: clamp(48px, 6vw, 96px);

  /* ---- Radii (editorial: sharp 2px default, 4px interactive; pills only via 999px on chips) ---- */
  --r1: 2px;
  --r2: 4px;

  /* ---- Shadows (restrained: 1 = soft card lift, 2 = sticky bar, 3 = drawer/modal) ---- */
  --shadow-1: 0 18px 44px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 1px 0 rgba(242, 237, 226, 0.04), 0 14px 34px rgba(0, 0, 0, 0.24);
  --shadow-3: 0 14px 34px rgba(0, 0, 0, 0.38);

  /* ---- Motion (Step 23 canonical roles) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* standard + enter (decelerate) */
  --ease-drawer: cubic-bezier(0.65, 0, 0.35, 1); /* large sheets (in/out) */
  --t-instant: 120ms; /* pressed feedback */
  --t-fast: 180ms; /* hover / micro */
  --t-base: 320ms; /* component state */
  --t-exit: 300ms; /* overlays / surfaces leaving */
  --t-overlay: 460ms; /* overlays / large surfaces entering */
  --t-slow: 640ms; /* large reveals */
  --t-cinematic: 900ms; /* page entrance (hero) */

  /* ---- Z-index architecture ---- */
  --z-header: 30;
  --z-overlay: 40;
  --z-drawer: 50;
  --z-toast: 60;
}