/* =============================================================
   Fathom Design System — colors_and_type.css
   The settlement layer for U.S. bank loans.
   ============================================================= */

/* ---------- Fonts ----------
   Brand spec:
     Display · serif: Tiempos Headline (licensed) → GT Sectra (licensed) → Georgia (system)
     Body · sans:     Söhne (licensed) → Inter (OSS) → Helvetica Neue (system)
   We ship Inter + Source Serif 4 from Google Fonts as open-source stand-ins
   for Söhne/Tiempos. Georgia is retained as the universal serif fallback
   (the logo SVGs render in Georgia).

   Flag for user: swap production serif to Tiempos Headline / GT Sectra
   and production sans to Söhne once licensed.                         */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Core palette (from brand guidelines §03) ---------- */
  --navy-deep:    #0B2545;  /* Primary · wordmark, mark, text on light   */
  --navy-mid:     #13315C;  /* Secondary · layering, hover, depth        */
  --brass:        #8D6E3F;  /* Accent · emphasis, rules, marks of trust  */
  --cream:        #F5F1E8;  /* Ground · backgrounds, paper, breathing    */

  /* Supporting neutrals — warm-leaning so cream reads as paper, not gray */
  --cream-deep:   #ECE6D6;  /* hover on cream, subtle fills              */
  --cream-shadow: #DDD4BD;  /* divider on cream, disabled fills          */
  --charcoal:     #1A1A1A;  /* body text on cream (never pure black)     */
  --charcoal-2:   #3D3D3D;  /* secondary text on cream                   */
  --charcoal-3:   #6B6B6B;  /* tertiary / captions                       */

  /* Brass tints (used sparingly — 10% of any layout) */
  --brass-tint:   #C4A574;  /* hover / highlighted rules                 */
  --brass-deep:   #6E5530;  /* pressed / dark-mode rule on cream         */

  /* Navy tints — layering on dark */
  --navy-deeper:  #071A33;  /* dark surface shadow / pressed             */
  --navy-tint:    #1E4379;  /* hover on navy                             */
  --navy-line:    rgba(245, 241, 232, 0.12); /* hairline on navy         */

  /* Semantic — muted, bank-grade, not crypto neon */
  --ok:      #3F6B4E;   /* settled, cleared, green but restrained        */
  --warn:    #9A7324;   /* pending, review, brassy yellow                */
  --risk:    #8B2E2E;   /* failed, overdue, oxblood red                  */
  --info:    #13315C;   /* same as navy-mid, deliberate                  */

  /* ---------- Semantic color tokens ---------- */
  --bg:           var(--cream);
  --bg-2:         var(--cream-deep);
  --bg-inverse:   var(--navy-deep);
  --bg-inverse-2: var(--navy-mid);

  --fg-1:         var(--charcoal);      /* primary text on cream        */
  --fg-2:         var(--charcoal-2);    /* secondary                     */
  --fg-3:         var(--charcoal-3);    /* tertiary / caption            */
  --fg-brand:     var(--navy-deep);     /* brand-voice text, headings    */
  --fg-on-dark-1: var(--cream);
  --fg-on-dark-2: rgba(245, 241, 232, 0.72);
  --fg-on-dark-3: rgba(245, 241, 232, 0.52);

  --accent:       var(--brass);
  --accent-hover: var(--brass-tint);
  --accent-press: var(--brass-deep);

  --rule:         var(--brass);              /* the famous brass rule    */
  --rule-hair:    var(--cream-shadow);       /* low-key divider on cream */
  --rule-hair-dark: var(--navy-line);        /* hairline on navy         */

  --focus-ring:   0 0 0 2px var(--cream), 0 0 0 4px var(--brass);

  /* ---------- Type families ---------- */
  --font-serif: "Source Serif 4", "Tiempos Headline", "GT Sectra", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---------- Type scale ----------
     Derived from the brand scale notes (H1 32pt, H2 22pt, H3 13pt, Body 10.5pt, Caption 9pt)
     lifted into screen units with a modest step-up for UI density.       */
  --fs-display: 72px;   /* hero one-liner, deck covers                    */
  --fs-h1:      44px;
  --fs-h2:      30px;
  --fs-h3:      20px;
  --fs-h4:      16px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;   /* ALL CAPS, tracked, 0 1 · S E C T I O N         */

  --lh-tight:   1.08;
  --lh-snug:    1.24;
  --lh-body:    1.55;
  --lh-loose:   1.72;

  /* Tracking — tight on serif display, generous on eyebrow caps */
  --tr-display: -0.015em;
  --tr-heading: -0.005em;
  --tr-body:    0;
  --tr-caps:    0.24em;     /* matches guideline eyebrow style "0 1 · E S S E N C E" */
  --tr-caps-sm: 0.14em;

  /* ---------- Spacing scale (4px base) ---------- */
  --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 — restrained. Banking, not consumer app. ---------- */
  --r-0: 0;
  --r-1: 2px;   /* inputs, chips */
  --r-2: 4px;   /* buttons, cards */
  --r-3: 6px;   /* modals */
  --r-pill: 999px;

  /* ---------- Shadows — soft, warm, low-key ---------- */
  --shadow-1: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-2: 0 2px 8px rgba(11, 37, 69, 0.08), 0 1px 2px rgba(11, 37, 69, 0.04);
  --shadow-3: 0 8px 24px rgba(11, 37, 69, 0.10), 0 2px 6px rgba(11, 37, 69, 0.05);
  --shadow-4: 0 20px 48px rgba(11, 37, 69, 0.14), 0 4px 12px rgba(11, 37, 69, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(11, 37, 69, 0.06);

  /* ---------- Motion — confident, not playful ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-enter:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

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

html { background: var(--bg); color: var(--fg-1); }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--fg-brand);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Headings inherit from their parent — so colored cards that set their own
   foreground (dark fields, brass chips) cascade correctly without a
   specificity fight. Body default is fg-brand (navy) for headings; opt
   paragraphs down to charcoal via .body-ink or by setting color on p. */
p, small, .caption, .mono, code, table { color: var(--fg-1); }

h1, .h1, h2, .h2, h3, .h3, h4, .h4,
.display {
  font-family: var(--font-serif);
  color: inherit;
  font-weight: 500;
  margin: 0;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-snug);  letter-spacing: var(--tr-heading); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug);  letter-spacing: var(--tr-heading); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-family: var(--font-sans); font-weight: 500; }

p  { margin: 0 0 var(--s-4); color: var(--fg-1); max-width: 68ch; }
p.lead { font-size: 18px; line-height: var(--lh-body); color: var(--fg-1); }
small, .caption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg-3);
}

/* Eyebrow — the section-number style from the brand PDF ("0 1 · E S S E N C E") */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--brass);
}

a {
  color: var(--fg-brand);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease-standard),
              text-decoration-color var(--dur-1) var(--ease-standard);
}
a:hover { color: var(--navy-mid); text-decoration-color: var(--brass-tint); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cream-deep);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
}

hr, .rule {
  border: 0;
  height: 1px;
  background: var(--rule-hair);
  margin: var(--s-6) 0;
}
hr.brass, .rule.brass {
  height: 2px;
  background: var(--brass);
}

::selection { background: var(--brass-tint); color: var(--navy-deep); }

/* Focus — brass ring on a cream halo, per guideline restraint */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-1);
}