/* ============================================================
   LIVINGSTON ASSOCIATES — COLORS & TYPE
   Foundation tokens. Import this once at the top of any artifact.

   Palette intent
   --------------
   The brand sits between editorial publishing and trust-services
   consulting. The core neutral is a warm ink (navy with a touch of
   green) — drawn from broadsheet headlines and on-air booth lighting.
   Cream paper supplies the warmth; an amber "on-air" accent supplies
   the spark. Cool slate handles surfaces and rules. Saturated colors
   are used sparingly — the brand is restrained, not flashy.
   ============================================================ */

:root {
  /* ── Brand core ───────────────────────────────────────────── */
  --la-ink-900:        #0E1E2E;   /* deepest editorial navy — body text on cream */
  --la-ink-800:        #14253A;   /* primary brand navy */
  --la-ink-700:        #1F3450;   /* hover/pressed of primary */
  --la-ink-600:        #2D4768;   /* secondary nav, captions */
  --la-ink-500:        #4B6486;   /* muted text, dividers in dark contexts */

  /* ── Brand Orange (accent) ────────────────────────────────── */
  /* The brand accent is the orange from the official wordmark.
     Token names kept as --la-amber-* for compatibility with the
     earlier draft. Canonical --la-orange-* aliases also exposed. */
  --la-amber-700:      #A84A14;   /* deep orange — text-on-cream */
  --la-amber-600:      #DC6D2C;   /* PRIMARY — brand orange (from wordmark) */
  --la-amber-500:      #E78448;   /* mid-tone hover */
  --la-amber-100:      #F8DDC4;   /* tag/pill background */
  --la-amber-50:       #FDF1E7;   /* call-out background */

  --la-orange-700:     var(--la-amber-700);
  --la-orange-600:     var(--la-amber-600);
  --la-orange-500:     var(--la-amber-500);
  --la-orange-100:     var(--la-amber-100);
  --la-orange-50:      var(--la-amber-50);

  /* Secondary sage — sampled from the wordmark's "ASSOCIATES" / tagline */
  --la-sage-600:       #7C8580;
  --la-sage-500:       #A8AEA7;
  --la-sage-300:       #C5C9C2;
  --la-sage-100:       #E2E4DF;

  /* Honey amber kept ONLY for the semantic 'warning' role */
  --la-warning-amber-600: #B57717;
  --la-warning-amber-50:  #FBEFD7;

  /* ── Paper neutrals (warm) ────────────────────────────────── */
  --la-paper-50:       #FBF8F2;   /* page background — cream */
  --la-paper-100:      #F4EFE5;   /* card alt, tag rows */
  --la-paper-200:      #E8E1D2;   /* hairline on cream */
  --la-paper-300:      #D6CDB9;   /* stronger rule on cream */

  /* ── Slate neutrals (cool) ────────────────────────────────── */
  --la-slate-50:       #F6F8FA;
  --la-slate-100:      #ECEFF3;
  --la-slate-200:      #DCE2EA;
  --la-slate-300:      #BFC8D4;
  --la-slate-400:      #8C9AAB;
  --la-slate-500:      #5C6B7E;
  --la-slate-600:      #3E4C5E;
  --la-slate-900:      #0F1620;

  /* ── Semantic ─────────────────────────────────────────────── */
  --la-success-600:    #1F6B4F;
  --la-success-50:     #E2EFE8;
  --la-warning-600:    var(--la-warning-amber-600);
  --la-warning-50:     var(--la-warning-amber-50);
  --la-error-600:      #A8362A;
  --la-error-50:       #F5DAD5;
  --la-info-600:       #2A5C8C;
  --la-info-50:        #DCE7F3;

  /* ── Foreground / background semantics ────────────────────── */
  --fg-1:              var(--la-ink-900);   /* primary text */
  --fg-2:              var(--la-ink-600);   /* secondary text */
  --fg-3:              var(--la-slate-500); /* tertiary text / metadata */
  --fg-on-dark:        var(--la-paper-50);
  --fg-on-dark-2:      #B6C2D2;             /* secondary on navy */
  --fg-link:           var(--la-amber-700);
  --fg-link-hover:     var(--la-ink-800);

  --bg-page:           var(--la-paper-50);
  --bg-surface:        #FFFFFF;
  --bg-surface-alt:    var(--la-paper-100);
  --bg-dark:           var(--la-ink-800);
  --bg-dark-alt:       var(--la-ink-900);

  --rule-soft:         var(--la-paper-200);
  --rule:              var(--la-paper-300);
  --rule-strong:       var(--la-ink-600);

  /* ── Type families ────────────────────────────────────────── */
  --font-serif:        "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:         "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display:      "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:         "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale (modular, base 16, ratio ~1.20) ───────────── */
  --fs-12: 0.75rem;   /* 12 — captions, eyebrow */
  --fs-14: 0.875rem;  /* 14 — UI small */
  --fs-16: 1rem;      /* 16 — body */
  --fs-18: 1.125rem;  /* 18 — body large / lede */
  --fs-21: 1.3125rem; /* 21 — h5 */
  --fs-25: 1.5625rem; /* 25 — h4 */
  --fs-31: 1.9375rem; /* 31 — h3 */
  --fs-39: 2.4375rem; /* 39 — h2 */
  --fs-49: 3.0625rem; /* 49 — h1 */
  --fs-61: 3.8125rem; /* 61 — display */
  --fs-76: 4.75rem;   /* 76 — hero display */

  /* ── Weights ──────────────────────────────────────────────── */
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;

  /* ── Line heights ─────────────────────────────────────────── */
  --lh-tight:          1.08;
  --lh-snug:           1.22;
  --lh-normal:         1.45;
  --lh-loose:          1.6;

  /* ── Tracking ─────────────────────────────────────────────── */
  --tracking-tight:    -0.018em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.14em;

  /* ── Spacing scale (4px base) ─────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-0:  0px;
  --r-1:  2px;     /* hairline-soft (inputs, tags) */
  --r-2:  4px;     /* default — most surfaces */
  --r-3:  8px;     /* cards */
  --r-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────── */
  --shadow-1:  0 1px 2px rgba(14, 30, 46, 0.06), 0 1px 1px rgba(14, 30, 46, 0.04);
  --shadow-2:  0 2px 4px rgba(14, 30, 46, 0.06), 0 4px 12px rgba(14, 30, 46, 0.06);
  --shadow-3:  0 6px 14px rgba(14, 30, 46, 0.08), 0 12px 28px rgba(14, 30, 46, 0.10);
  --shadow-inset-rule: inset 0 -1px 0 var(--rule-soft);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-decel:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accel:     cubic-bezier(0.4, 0.0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
}

/* ============================================================
   BASE / RESET — light editorial
   ============================================================ */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* ============================================================
   SEMANTIC TYPE — apply with classes or via element selectors
   ============================================================ */

.eyebrow,
.h-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-76);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-61);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-49);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-39);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-31);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-21);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  margin: 0 0 var(--sp-2);
}

.lede {
  font-family: var(--font-sans);
  font-size: var(--fs-21);
  line-height: var(--lh-loose);
  font-weight: 350;          /* Segoe UI Semilight */
  color: var(--fg-1);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.p-large {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
}

.p-small,
small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-1) var(--ease-standard);
}

a:hover {
  color: var(--fg-link-hover);
  text-decoration-thickness: 2px;
}

blockquote {
  font-family: var(--font-sans);
  font-size: var(--fs-25);
  line-height: var(--lh-snug);
  font-weight: 300;          /* Segoe UI Light Italic */
  font-style: italic;
  color: var(--fg-1);
  border-left: 2px solid var(--la-amber-600);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--la-amber-100);
  color: var(--la-ink-900);
}