/* ============================================================
   Arsh Consumers — Design tokens ONLY. No component rules here.
   Every colour/size/easing used in the site resolves to a token below.
   ============================================================ */
:root {
  /* --- Ink / dark frame --- */
  --ink-900: #0A1A2F;
  --ink-800: #0E2136;
  --ink-700: #14304C;

  /* --- Brass / accent (three-tier for WCAG AA) ---
     500 bright: fills, rules, focus ring, link TEXT on dark (6.76:1 on ink)
     600 large-text / UI on light only (3.37:1 — never body)
     700 interactive TEXT on light (4.78:1 — passes AA body) */
  --brass-500: #C79A3E;
  --brass-600: #A87E28;
  --brass-700: #8A6620;

  /* --- Paper / light surface --- */
  --paper-50:  #F7F4EE;
  --paper-100: #EFEAE0;
  --paper-200: #E4DCCC;
  --surface:   #FFFFFF;

  /* --- Text --- */
  --text:               #1A2430; /* 14.3:1 on paper-50 */
  --text-muted:         #4E5B68; /* 6.33:1 on paper-50 */
  --text-on-dark:       #F7F4EE; /* 15.9:1 on ink-900 */
  --text-on-dark-muted: #A9B4C0; /* 8.3:1 on ink-900 */

  /* --- Lines --- */
  --line:        #DED7C9;
  --line-strong: #C6BCA8;
  --line-on-dark:#25405C;

  /* --- Semantic aliases --- */
  --bg:        var(--paper-50);
  --accent:    var(--brass-500);
  --link:      var(--brass-700);
  --focus:     var(--brass-500);
  --danger:    #A6321F; /* form errors on light — 5.6:1 */

  /* --- Typography --- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step-display-xl: clamp(2.75rem, 1.6rem + 5vw, 4.75rem);
  --step-display-l:  clamp(2.1rem, 1.4rem + 3vw, 3.25rem);
  --step-h2:         clamp(1.6rem, 1.2rem + 1.7vw, 2.25rem);
  --step-h3:         1.3rem;
  --step-body-l:     1.15rem;
  --step-body:       1rem;
  --step-small:      0.9rem;
  --step-mono:       0.8rem;
  --step-eyebrow:    0.72rem;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Radius (one system: soft) --- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* --- Shadows (warm-tinted, never pure black) --- */
  --shadow-sm: 0 1px 2px rgba(26, 20, 8, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 20, 8, 0.10);
  --shadow-lg: 0 20px 50px rgba(10, 26, 47, 0.16);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-mid: 300ms;
  --dur-slow: 700ms;

  /* --- Layout --- */
  --maxw: 1240px;
  --maxw-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --header-h: 100px;

  --z-header: 100;
  --z-menu: 200;
  --z-preloader: 300;
}