/* =========================================================================
   Lyon Wealth Advisory — Design Tokens
   Single source of truth for colors, type, spacing, radii, shadows.
   Import once at the top of any page:
     <link rel="stylesheet" href="/brand-tokens.css">
   ========================================================================= */

/* --- Webfonts ----------------------------------------------------------- */
/* Hanken Grotesk — primary sans (body, UI, captions). On Google Fonts.   */
/* Cormorant Garamond — serif stand-in for the brand's display serif.     */
/*   The original brand-board cites "Optima"; the actual logo + the type  */
/*   feel calls for a classical transitional serif. If/when the foundry   */
/*   licensed face arrives, replace --font-serif here and the @import.    */
/* The Google Fonts stylesheet is linked and preloaded from the page head (see src/layouts/Base.astro) instead of imported here, so it does not block rendering. */

:root {
  /* ---------- Brand palette (from brand-board PDF) -------------------- */
  --slate-900: #1a262b;          /* darker companion of slate */
  --slate-800: #25383f;          /* PRIMARY — deep slate teal */
  --slate-600: #3e555e;
  --slate-400: #6d94a5;          /* SECONDARY — dusty blue */
  --slate-300: #9bb4bf;
  --slate-200: #c9d6dc;
  --slate-100: #e8eef1;

  --bronze-700: #6e5238;
  --bronze-500: #9b7956;         /* warm tan / bronze */
  --bronze-300: #c4a988;

  --crimson-800: #5a0d0f;
  --crimson-700: #751113;        /* deep crimson — sparingly */

  --sage-700: #4d5b4a;
  --sage-500: #667763;           /* muted sage — accents */
  --sage-300: #98a895;

  --cream-200: #f1ede0;
  --cream-100: #e1dbca;          /* warm cream — primary light bg */
  --cream-50:  #f7f4ea;

  --ink:   #18242a;              /* near-black, never pure black */
  --paper: #fbfaf5;              /* warm off-white page bg */
  --line:  rgba(37, 56, 63, 0.14);
  --line-strong: rgba(37, 56, 63, 0.28);

  /* ---------- Semantic surface roles ---------------------------------- */
  --bg:           var(--paper);
  --bg-muted:     var(--cream-200);
  --bg-inverse:   var(--slate-800);
  --bg-card:      #ffffff;

  --fg:           var(--ink);          /* primary text on light */
  --fg-muted:     #4f6068;             /* secondary text */
  --fg-subtle:    #7c8a90;             /* captions, helpers */
  --fg-on-dark:   var(--cream-100);    /* primary text on slate */
  --fg-on-dark-muted: rgba(225, 219, 202, 0.72);

  --accent:       var(--slate-400);    /* dusty-blue accent */
  --accent-warm:  var(--bronze-500);   /* bronze accent */
  --accent-deep:  var(--crimson-700);  /* reserved — alerts, year-end docs */

  /* ---------- Type families ------------------------------------------- */
  --font-sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ---------- Type scale ---------------------------------------------- */
  /* Display headings use the serif. UI / body / labels use the sans.    */
  --fs-display: clamp(54px, 7vw, 96px); /* @kind font */
  --fs-h1: 45px;          /* per brand board */
  --fs-h2: 38px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-lead: 22px;
  --fs-body: 16px;        /* per brand board */
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;     /* used UPPERCASE with letter-spacing */

  --lh-tight:   1.05; /* @kind other */
  --lh-display: 1.08; /* @kind other */
  --lh-heading: 1.18; /* @kind other */
  --lh-body:    1.55; /* @kind other */
  --lh-loose:   1.7; /* @kind other */

  /* Brand-board letter-spacing values, normalized to em.
     Photoshop / InDesign tracking 100 units ≈ 0.1em.                    */
  --tracking-tight:   0.005em; /* @kind other */ /* H1: 0–20 */
  --tracking-normal:  0.02em; /* @kind other */ /* body: 0–10 */
  --tracking-wide:    0.04em; /* @kind other */ /* H2 / H3: 20–40 */
  --tracking-eyebrow: 0.18em; /* @kind other */ /* uppercase eyebrows */
  --tracking-caps:    0.06em; /* @kind other */ /* uppercase wordmark text */

  /* ---------- Spacing (8pt grid w/ refined first steps) --------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii (restrained — wealth = trust = squared edges) ----- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---------- Borders ------------------------------------------------- */
  --border:        1px solid var(--line); /* @kind other */
  --border-strong: 1px solid var(--line-strong); /* @kind other */
  --hairline:      1px solid rgba(37, 56, 63, 0.08); /* @kind other */

  /* ---------- Shadows (soft, low-saturation, never blue-purple) ------- */
  --shadow-xs: 0 1px 2px rgba(37, 56, 63, 0.06);
  --shadow-sm: 0 2px 6px rgba(37, 56, 63, 0.06), 0 1px 2px rgba(37, 56, 63, 0.04);
  --shadow-md: 0 8px 24px rgba(37, 56, 63, 0.08), 0 2px 6px rgba(37, 56, 63, 0.05);
  --shadow-lg: 0 24px 48px rgba(37, 56, 63, 0.12), 0 6px 16px rgba(37, 56, 63, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(37, 56, 63, 0.04);

  /* ---------- Motion -------------------------------------------------- */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---------- Layout -------------------------------------------------- */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
  --container-full:   1440px;
}

/* ============= Semantic element styles ================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'ss01', 'kern';
}

/* Display & headings — serif */
.display, h1.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--fg);
}
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  /* per brand board H2 is sans (Hanken Reg, 38px, wider tracking)       */
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-wide);
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}
h3, .h3 {
  /* H3 — serif display, mid-size                                        */
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: var(--tracking-normal);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.45;
  font-weight: 300;
  color: var(--fg-muted);
  letter-spacing: var(--tracking-normal);
}
p { margin: 0 0 1em; max-width: 68ch; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-subtle);
}
.caption {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-normal);
}
small, .small { font-size: var(--fs-small); color: var(--fg-muted); }
.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.numeral {
  font-family: var(--font-serif);
  font-feature-settings: 'lnum', 'tnum';
  font-variant-numeric: lining-nums tabular-nums;
}
.wordmark-caps {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 500;
}

a { color: var(--slate-800); text-decoration: underline; text-decoration-color: var(--slate-300); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--slate-800); }

/* Horizontal divider — hairline, our brand uses these often */
hr { border: 0; border-top: var(--hairline); margin: var(--space-6) 0; }

/* Selection */
::selection { background: var(--slate-200); color: var(--slate-900); }