/* ============================================================
   F&G Detail — Colors & Type
   Brand colors are derived from the F&G logo: a deep teal-black
   background, polar/silver white wordmark, and a subtle steel-
   blue accent on the emblem. Tone is luxe + automotive.
   ============================================================ */

/* ---- Webfonts (Google Fonts substitutions — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand palette (sampled from logo) ---------- */
  --fg-ink:        #0F2824;   /* primary brand — deep teal-black (logo bg) */
  --fg-ink-2:      #0A1B18;   /* near-black, used for footers / over-dark */
  --fg-ink-3:      #173631;   /* one step lighter than ink, hover/elevated */
  --fg-chrome:     #C6CBC7;   /* silver/chrome — secondary text on dark */
  --fg-mist:       #A5B2A8;   /* fog/foam grey — tertiary text */
  --fg-steel:      #305080;   /* steel-blue accent from emblem */
  --fg-steel-2:    #4B6FA3;   /* lighter steel for hover/links */

  /* ---------- Neutrals (foam → ink) ---------- */
  --fg-paper:      #F8F9F7;   /* page background, "foam" off-white */
  --fg-paper-2:    #EFF1ED;   /* card alt bg */
  --fg-line:       #DDE1DC;   /* hairline dividers */
  --fg-line-2:     #C7CCC6;
  --fg-mute:       #6E7873;   /* muted body */
  --fg-pearl:      #FFFFFF;

  /* ---------- Semantic foreground / background ---------- */
  --fg-bg:         var(--fg-paper);
  --fg-bg-elev:    var(--fg-pearl);
  --fg-bg-inv:     var(--fg-ink);
  --fg-fg-1:       var(--fg-ink);        /* headings, primary text */
  --fg-fg-2:       #2A3B36;              /* body */
  --fg-fg-3:       var(--fg-mute);       /* secondary */
  --fg-fg-inv:     var(--fg-paper);      /* on dark */
  --fg-fg-inv-2:   var(--fg-chrome);     /* secondary on dark */
  --fg-border:     var(--fg-line);
  --fg-border-strong: var(--fg-line-2);

  /* ---------- Status (kept restrained, luxe vibe) ---------- */
  --fg-success:    #3F7A5B;   /* deep eucalyptus */
  --fg-warning:    #B68A2E;   /* aged brass */
  --fg-danger:     #A33B2A;   /* muted ember */
  --fg-info:       var(--fg-steel);

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

  /* ---------- Radii (mostly subtle / squarer; luxe automotive) ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Elevation (soft, low spread) ---------- */
  --shadow-1: 0 1px 2px rgba(10,27,24,.06), 0 1px 1px rgba(10,27,24,.04);
  --shadow-2: 0 4px 12px rgba(10,27,24,.08), 0 2px 4px rgba(10,27,24,.05);
  --shadow-3: 0 14px 32px rgba(10,27,24,.12), 0 4px 10px rgba(10,27,24,.06);
  --shadow-ink: 0 18px 40px rgba(10,27,24,.32);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---------- Type families ---------- */
  --font-display: "Oswald", "Bebas Neue", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Manrope", "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --t-eyebrow: 12px;
  --t-caption: 13px;
  --t-body-sm: 14px;
  --t-body:    16px;
  --t-body-lg: 18px;
  --t-h6:      18px;
  --t-h5:      22px;
  --t-h4:      28px;
  --t-h3:      36px;
  --t-h2:      52px;
  --t-h1:      72px;
  --t-display: 104px;

  /* ---------- Tracking ---------- */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.06em;
  --tr-wider:   0.14em;   /* used for ALL-CAPS labels like "DETAIL" */
}

/* ============================================================
   Semantic typography (use these tags or apply via classes)
   ============================================================ */

html, body {
  background: var(--fg-bg);
  color: var(--fg-fg-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  color: var(--fg-fg-1);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
  margin: 0;
}

.display { font-family: var(--font-display); font-size: var(--t-display); font-weight: 600; line-height: .96; letter-spacing: -0.025em; text-transform: uppercase; }
h1, .h1 { font-size: var(--t-h1); text-transform: uppercase; letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--t-h2); text-transform: uppercase; letter-spacing: -0.005em; }
h3, .h3 { font-size: var(--t-h3); }
h4, .h4 { font-size: var(--t-h4); }
h5, .h5 { font-size: var(--t-h5); }
h6, .h6 { font-size: var(--t-h6); font-weight: 500; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg-steel);
}
.eyebrow--ink { color: var(--fg-ink); }
.eyebrow--chrome { color: var(--fg-chrome); }

p, .p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-fg-2);
  text-wrap: pretty;
  margin: 0;
}
.p-lg  { font-size: var(--t-body-lg); line-height: 1.55; }
.p-sm  { font-size: var(--t-body-sm); }
.caption { font-size: var(--t-caption); color: var(--fg-fg-3); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: .92em;
}

a {
  color: var(--fg-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-steel); }

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

/* Utility: stamp the F&G "DETAIL" tracking style on a label */
.label-stamp {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  font-size: var(--t-caption);
  color: var(--fg-chrome);
}