/* =========================================================================
   Covered Egg— Color & Type tokens
   Warm, earthy palette + friendly editorial serif paired with a humanist sans.
   Designed to feel professional but approachable — like an insurance expert
   you actually want to talk to.
   ========================================================================= */

/* ----- Webfonts (Google Fonts) -----
   Crimson Pro — classical Garalde serif for display & lede. The italic carries
   real personality and the text weights stay readable down to 14px.
   Manrope    — modern geometric sans for UI & body. Slightly rounded, neutral,
   pairs well with a classical serif without echoing its formality.
   JetBrains Mono — numbers, SERFF IDs, code. Tabular by default. */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Base palette: warm earth ----------
     Named by feel, not by hex. Use semantic vars below in real code. */

  /* Surfaces */
  --eggshell-50:  #FBF7EF;  /* page bg — like the inside of an eggshell */
  --eggshell-100: #F5EEDF;  /* card on page */
  --eggshell-200: #ECE1CB;  /* hairline on cream */
  --linen-300:    #DECDAE;  /* warm divider */
  --sand-400:     #C9B189;  /* muted control bg */

  /* Inks */
  --cocoa-900: #2A1F14;  /* primary text */
  --cocoa-800: #3D2D1C;  /* heading text */
  --cocoa-700: #5A4632;  /* body text */
  --cocoa-500: #8A7556;  /* secondary text / muted */
  --cocoa-400: #A6906F;  /* hint / placeholder */

  /* Primary — deep teal (the action color)
     Pulls in blue + green for trust without going corporate-blue. Warm enough
     to sit on cream surfaces, cool enough to read as financial/regulated. */
  --teal-900: #0F3138;
  --teal-700: #1B4751;
  --teal-600: #285E6B;
  --teal-500: #347585;  /* primary action */
  --teal-400: #5C97A6;
  --teal-200: #B7D3DA;
  --teal-100: #D2E3E8;
  --teal-50:  #E5EFF2;

  /* Secondary — sage (positive data, calm signals) */
  --sage-700: #2E5742;
  --sage-600: #3D7355;
  --sage-500: #5A9072;
  --sage-300: #9CC0AA;
  --sage-200: #C9D6C5;
  --sage-100: #DFE7DB;

  /* Accent — terracotta (warm highlight, attention, diff) */
  --terracotta-700: #8C3E1F;
  --terracotta-600: #A8492A;
  --terracotta-500: #C45A33;
  --terracotta-400: #D67A55;
  --terracotta-100: #F5DCCC;
  --terracotta-50:  #FBEEE4;

  /* Accent — honey (highlights, diffs in tables) */
  --honey-600: #B58900;     /* preserved from legacy diff color */
  --honey-500: #D9A441;
  --honey-200: #F4E0B0;
  --honey-100: #FBF1D3;
  --honey-50:  #FFF8E1;     /* the existing warm-yellow row highlight */

  /* Status */
  --moss-600:    #2E7D4F;   /* positive / min */
  --moss-100:    #D7E8DC;
  --brick-600:   #B53A2A;   /* negative / max / error */
  --brick-100:   #F6D9D2;
  --slate-600:   #5B6770;   /* neutral / disabled */
  --slate-100:   #E4E7EA;

  /* ---------- Semantic surfaces ---------- */
  --bg-page:        var(--eggshell-50);
  --bg-card:        #FFFCF4;
  --bg-card-sunk:   var(--eggshell-100);
  --bg-input:       #FFFFFF;
  --bg-input-soft:  var(--eggshell-100);
  --bg-row-alt:     #FAF2E0;
  --bg-row-hover:   var(--terracotta-50);

  /* Borders */
  --border-hair:    #E9DCC0;   /* faintest divider */
  --border-soft:    var(--eggshell-200);
  --border-strong:  var(--linen-300);
  --border-focus:   var(--teal-500);

  /* Text */
  --fg-1:        var(--cocoa-900);  /* primary */
  --fg-2:        var(--cocoa-700);  /* body */
  --fg-muted:    var(--cocoa-500);  /* meta, captions */
  --fg-hint:     var(--cocoa-400);  /* placeholders */
  --fg-on-dark:  #FBF7EF;
  --fg-link:     var(--teal-600);
  --fg-link-hover: var(--teal-700);

  /* Actions */
  --action-primary-bg:        var(--teal-500);
  --action-primary-bg-hover:  var(--teal-600);
  --action-primary-bg-active: var(--teal-700);
  --action-primary-fg:        #FBF7EF;
  --action-secondary-bg:      var(--bg-card);
  --action-secondary-bg-hover: var(--eggshell-100);
  --action-secondary-fg:      var(--cocoa-800);

  /* Data-vis (line chart series — replaces D3's schemeCategory10)
     Deliberately wide hue spread so adjacent lines stay distinguishable even
     at thin stroke widths. Hues rotate roughly: teal → orange → green → purple
     → blue → red → olive → magenta. Luminance is held in a mid band so no one
     series visually dominates. */
  --series-1: #347585;  /* teal       — primary brand */
  --series-2: #D87242;  /* tangerine  — warm contrast to teal */
  --series-3: #2FA85C;  /* green      — brighter/greener so it doesn't read as teal */
  --series-4: #7E4FA0;  /* violet     — saturated cool */
  --series-5: #2F66B5;  /* cobalt     — clean blue */
  --series-6: #C73E3E;  /* crimson    — alarm/attention */
  --series-7: #8A7B2B;  /* olive      — earthy yellow-green */
  --series-8: #B5418C;  /* magenta    — pink-purple */

  /* ---------- Typography ---------- */
  --font-display: "Crimson Pro", "Source Serif Pro", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (px values follow a soft 1.2 ratio) */
  --type-xs:   12px;
  --type-sm:   13px;
  --type-base: 15px;
  --type-md:   17px;
  --type-lg:   20px;
  --type-xl:   24px;
  --type-2xl:  32px;
  --type-3xl:  44px;
  --type-4xl:  56px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.01em;
  --tracking-flat:  0;
  --tracking-wide:  0.04em;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 56px;
  --space-16: 80px;

  /* ---------- Shadows ---------- */
  /* Warm-toned shadows — based on cocoa rather than neutral black so they
     sit naturally on cream backgrounds. */
  --shadow-xs:  0 1px 2px rgba(58, 36, 14, 0.06);
  --shadow-sm:  0 2px 4px rgba(58, 36, 14, 0.07), 0 1px 1px rgba(58, 36, 14, 0.04);
  --shadow-md:  0 6px 16px rgba(58, 36, 14, 0.09), 0 2px 4px rgba(58, 36, 14, 0.05);
  --shadow-lg:  0 16px 32px rgba(58, 36, 14, 0.12), 0 4px 8px rgba(58, 36, 14, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                  inset 0 -1px 0 rgba(58, 36, 14, 0.06);
  --shadow-focus: 0 0 0 3px rgba(52, 117, 133, 0.25);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
}

/* =========================================================================
   Semantic element styles — use these as a base for any HTML you build.
   ========================================================================= */

html {
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--type-3xl); font-weight: 500; }
h2 { font-size: var(--type-2xl); font-weight: 500; }
h3 { font-size: var(--type-xl);  font-weight: 500; }
h4 { font-size: var(--type-md);  font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }

p {
  margin: 0;
  color: var(--fg-2);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--terracotta-600);
}

.lede {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  line-height: var(--lh-snug);
  color: var(--cocoa-700);
  font-weight: 400;
}

.muted {
  color: var(--fg-muted);
  font-weight: 400;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-color: rgba(40, 94, 107, 0.35);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--fg-link-hover);
  text-decoration-color: currentColor;
}

::selection {
  background: var(--honey-200);
  color: var(--cocoa-900);
}