/* ============================================================
   FARO — DESIGN TOKENS
   Single source of truth for colors, type, spacing, radii, shadows.
   Derived from: 03-visual-identity/color/palette.md + typography/type-system.md
   Import this file first; build all components against these variables.
   ============================================================ */

/* Fonts (Google Fonts, free) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  /* -------- BRAND COLORS -------- */
  --navy:        #102A43;  /* Tower — primary, headers, dark sections, body text on light */
  --navy-2:      #1B3A5C;  /* Tower shade — hover on navy, gradients */
  --blue:        #2C6FD6;  /* Lantern — links, secondary actions, icon strokes */
  --blue-light:  #6FA8E8;  /* Lantern on dark — accents on navy only */
  --brass:       #C8861E;  /* Beacon — primary CTA bg, highlights (use sparingly) */
  --brass-light: #D4A028;  /* Beacon on dark — accents on navy */
  --brass-dark:  #A66E12;  /* Beacon hover; the brass usable with white text (large only) */
  --paper:       #F7F4EE;  /* Warm light background — NEVER a cold grey */
  --white:       #FFFFFF;
  --ink:         #1B2733;  /* Body text */
  --muted:       #4D5561;  /* Secondary text (AA on paper/white) */
  --line:        #E4DFD5;  /* Warm hairline borders/dividers */

  /* Semantic aliases */
  --bg:            var(--paper);
  --bg-alt:        var(--white);
  --bg-dark:       var(--navy);
  --text:          var(--ink);
  --text-muted:    var(--muted);
  --text-on-dark:  var(--white);
  --link:          var(--blue);
  --border:        var(--line);

  /* CTA / buttons  (⚠ brass button MUST use navy text — white on brass fails AA) */
  --btn-primary-bg:    var(--brass);
  --btn-primary-text:  var(--navy);
  --btn-primary-hover: var(--brass-dark);
  --btn-secondary-bg:  var(--navy);
  --btn-secondary-text:var(--white);

  /* -------- TYPOGRAPHY -------- */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-display: 3.5rem;   --lh-display: 1.05;   /* Hero H1 (mobile: ~2.375rem) */
  --text-h1:      2.75rem;  --lh-h1: 1.1;         /* (mobile: ~2rem) */
  --text-h2:      2.0625rem;--lh-h2: 1.15;
  --text-h3:      1.5625rem;--lh-h3: 1.2;
  --text-h4:      1.25rem;  --lh-h4: 1.3;
  --text-lead:    1.25rem;  --lh-lead: 1.55;
  --text-body:    1.0625rem;--lh-body: 1.6;
  --text-body-sm: 0.9375rem;--lh-body-sm: 1.55;
  --text-caption: 0.84rem;  --lh-caption: 1.5;
  --text-eyebrow: 0.78rem;

  --fw-regular: 400;  --fw-semibold: 600;  --fw-bold: 700;
  --tracking-eyebrow: 0.14em;
  --tracking-wordmark: 0.11em;

  /* -------- SPACING (8px base) -------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;     --space-8: 3rem;     --space-10: 4rem;
  --space-12: 6rem;    --space-16: 8rem;    /* section padding */
  --container-max: 1120px;
  --container-pad: 1.5rem;

  /* -------- RADII -------- */
  --radius-sm: 6px;   --radius-md: 12px;   --radius-lg: 16px;   --radius-pill: 999px;

  /* -------- SHADOWS (soft, warm) -------- */
  --shadow-sm: 0 1px 3px rgba(16,42,67,0.06);
  --shadow-md: 0 4px 16px rgba(16,42,67,0.08);
  --shadow-lg: 0 12px 32px rgba(16,42,67,0.12);

  /* -------- MOTION -------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;
}

/* -------- BASE ELEMENT DEFAULTS (optional starting point) -------- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--navy); margin: 0 0 0.5em; }
h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--fw-regular); }
a  { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.eyebrow {
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--brass);
}

.btn-primary {
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn-primary:hover { background: var(--btn-primary-hover); color: var(--white); }

.btn-secondary {
  background: var(--btn-secondary-bg); color: var(--btn-secondary-text);
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); border: 0; cursor: pointer;
}

/* Dark section helper — creates the light/dark rhythm the beacon needs */
.section-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }

/* Mobile type step-down */
@media (max-width: 640px) {
  :root { --text-display: 2.375rem; --text-h1: 2rem; --text-h2: 1.625rem; }
}