/* tokens.css — design tokens only. No component rules here.
   Arsh Asset Management palette: deep navy base, charcoal text, gold/amber + emerald accents. */
:root {
  /* ---- Brand primaries ---- */
  --navy-900: #001F54;   /* deep navy — dark sections, hero, footer, headings */
  --navy-800: #0A2A5C;
  --navy-700: #17386B;
  --teal:     #0D5C75;   /* deep teal — links, secondary accent */
  --teal-600: #0A4C61;
  --emerald:  #50C878;   /* growth accent (on dark / highlights) */
  --emerald-700: #2E7D4F;/* emerald text on light (AA) */

  /* ---- Neutrals ---- */
  --charcoal: #22252A;   /* body text */
  --gray:     #A3A8B8;   /* warm gray — lines, subtle */
  --gray-600: #565D6B;   /* muted text on light (AA) */
  --bg:       #F4F5F7;   /* page background */
  --surface:  #FFFFFF;   /* card surface */

  /* ---- Accents ---- */
  --gold:        #C79A46; /* logo gold — buttons, rules, icon strokes */
  --gold-text:   #7A5E12; /* AA gold for small text/eyebrow on light */
  --amber:       #D8B167; /* logo bright gold — accents on dark, CTA highlight */
  --seal-red:    #C0392B; /* form errors only */

  /* ---- Legacy token names remapped (used across components) ---- */
  --ink-900: var(--navy-900);
  --ink-800: var(--navy-800);
  --ink-700: #2A3550;    /* UI text on light (nav, list items) */
  --ink-500: var(--gray-600);
  --slate-300: #AEB6C4;  /* text on dark, secondary */
  --bone-100: var(--bg);
  --bone-050: var(--surface);
  --gold-deep: var(--gold-text);
  --gold-mid: var(--gold);
  --gold-bright: var(--amber);
  --green: var(--emerald-700);

  /* ---- Semantic ---- */
  --text: var(--charcoal);
  --text-muted: var(--gray-600);
  --text-on-dark: #CBD1DC;
  --heading: var(--navy-900);
  --link: var(--teal);
  --accent: var(--gold);
  --line: rgba(0, 31, 84, 0.10);
  --line-strong: rgba(0, 31, 84, 0.18);
  --line-dark: rgba(255, 255, 255, 0.14);

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1: clamp(2.5rem, 1.6rem + 4.2vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 2.5rem);
  --fs-h3: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);  /* reduced */
  --fs-sm: 0.9375rem;
  --fs-eyebrow: 0.8125rem;
  --fs-desc: 0.9375rem;  /* descriptions under headings */

  --lh-body: 1.62;
  --lh-heading: 1.08;
  --measure: 66ch;
  --track-eyebrow: 0.14em;

  /* ---- Space (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px; --s-40: 160px;
  --section-y: clamp(80px, 12vw, 160px);
  --section-y-sm: clamp(56px, 8vw, 96px);

  /* ---- Layout ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 96px;

  /* ---- Surfaces ---- */
  --radius-btn: 3px;
  --radius-card: 10px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,31,84,.05), 0 8px 24px rgba(0,31,84,.07);
  --shadow-2: 0 2px 4px rgba(0,31,84,.06), 0 16px 40px rgba(0,31,84,.12);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 720ms;

  /* image unifying grade — cooler to match navy */
  --img-grade: saturate(0.96) contrast(1.02);
}