/* =============================================================================
   Standby Capital — Colors & Type
   Source of truth for design tokens. Import into any slide/HTML.
   ============================================================================= */

/* Web-font substitutes ------------------------------------------------------ */
/* Calibri is Microsoft-licensed and not redistributable. Carlito is the
   open, metrics-compatible twin used here for web preview. PowerPoint output
   should use real Calibri. Flagged in README. */
@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* Roboto Mono (mono token) — served from Google Fonts, same as Carlito above, so
   --font-mono resolves to a real face without a local upload. Same family the
   token already names; not a substitute. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
/* Georgia is a system font and used directly; no @import needed. */

:root {
  /* --- Brand color ---------------------------------------------------------- */
  --navy:           #14213D;   /* primary, headers, icons, dark boxes */
  --navy-deep:      #0B1428;   /* slightly darker variant for hover/press */
  --navy-tint:      #2A3654;   /* lighter navy for secondary marks */

  --blue-accent:    #1F4E9D;   /* emphasis numbers, $3M / 18% / 24-mo */
  --blue-accent-2:  #2E6FC4;   /* lighter accent, callouts on navy */

  --cream:          #F5F5F0;   /* primary background */
  --cream-2:        #ECEBE3;   /* secondary surface / subtle banding */
  --cream-3:        #E0DED4;   /* hairline / divider */

  --paper:          #FFFFFF;   /* white surface for inset cards */

  /* --- Neutrals (warm grey scale tuned to cream BG) ------------------------- */
  --ink:            #1A1A1A;   /* near-black body, used sparingly */
  --ink-2:          #3D3D3D;   /* default body */
  --ink-3:          #6B6B6B;   /* secondary body, captions */
  --ink-4:          #8E8C84;   /* tertiary, metadata, footers */
  --ink-5:          #B6B3A8;   /* hairline rules on cream */

  /* --- Semantic ------------------------------------------------------------- */
  --fg-1:           var(--navy);          /* primary text on cream */
  --fg-2:           var(--ink-2);         /* body */
  --fg-3:           var(--ink-3);         /* secondary body */
  --fg-4:           var(--ink-4);         /* captions, footers, footnotes */
  --fg-on-navy:     var(--cream);         /* text on navy surfaces */
  --fg-on-navy-2:   #C9C7BF;              /* secondary text on navy */

  --bg-1:           var(--cream);         /* deck background */
  --bg-2:           var(--cream-2);       /* secondary surface band */
  --bg-3:           var(--paper);         /* card / inset */
  --bg-emphasis:    var(--navy);          /* dark emphasis box */

  --rule:           var(--ink-5);
  --rule-strong:    var(--navy);

  --accent:         var(--blue-accent);   /* emphasis number color */

  /* --- Type families ------------------------------------------------------- */
  --font-serif:     Georgia, "Times New Roman", Times, serif;
  --font-sans:      Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
  --font-mono:      "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  /* --- Type scale (16:9 deck at 1280×720 base; scale linearly for 1920×1080) - */
  /* Use these as authoritative pixel values when building slides. */
  --fs-display:     64px;   /* cover wordmark / closing endpaper */
  --fs-h1:          44px;   /* slide title */
  --fs-h2:          32px;   /* section header */
  --fs-h3:          22px;   /* subhead / box title */
  --fs-lead:        20px;   /* anchor sentences */
  --fs-body:        17px;   /* default body */
  --fs-body-sm:     15px;   /* dense body / table cell */
  --fs-caption:     13px;   /* caption, in-slide footnote */
  --fs-footer:      11px;   /* page footer, disclaimer */
  --fs-disclaimer:  10px;   /* smallest legible disclaimer */

  --fs-number-xl:   88px;   /* hero number, $3M / 18% emphasis */
  --fs-number-lg:   56px;   /* secondary big number */
  --fs-number-md:   36px;   /* terms grid number */

  /* --- Line height --------------------------------------------------------- */
  --lh-tight:       1.12;     /* @kind font */
  --lh-snug:        1.28;     /* @kind font */
  --lh-body:        1.45;     /* @kind font */
  --lh-loose:       1.6;      /* @kind font */

  /* --- Tracking ------------------------------------------------------------ */
  --tr-tight:       -0.01em;
  --tr-normal:      0;         /* @kind font */
  --tr-eyebrow:     0.14em;   /* uppercase labels */

  /* --- Spacing scale (8pt grid, tightened for dense slides) ---------------- */
  --sp-0:   0;        /* @kind spacing */
  --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;

  /* --- Slide layout -------------------------------------------------------- */
  --slide-w:        1280px;
  --slide-h:        720px;
  --slide-margin-x: 72px;
  --slide-margin-y: 56px;
  --slide-footer-y: 32px;

  /* --- Borders & radii ----------------------------------------------------- */
  --hr-thin:        1px solid var(--rule);
  --hr-strong:      2px solid var(--rule-strong);
  --radius-0:       0;        /* default. Standby is a square-cornered system. */
  --radius-1:       2px;      /* hairline radius for tags only */
  --radius-2:       4px;      /* max — chips, small pills */
}

/* =============================================================================
   Semantic element styles. Import into a slide/HTML for "just works" defaults.
   ============================================================================= */

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

h1, h2, h3, h4, h5, h6,
.display, .eyebrow {
  font-family: var(--font-serif);
  color: var(--fg-1);
  font-weight: 400;          /* Georgia regular reads as authoritative */
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

.display { font-size: var(--fs-display); }
h1       { font-size: var(--fs-h1); }
h2       { font-size: var(--fs-h2); }
h3       { font-size: var(--fs-h3); line-height: var(--lh-snug); }

p, li {
  font-family: var(--font-sans);
  color: var(--fg-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  color: var(--fg-1);
  line-height: var(--lh-snug);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-3);
}

.caption  { font-size: var(--fs-caption);   color: var(--fg-3); }
.footer   { font-size: var(--fs-footer);    color: var(--fg-4); }
.disclaim { font-size: var(--fs-disclaimer);color: var(--fg-4); line-height: 1.5; }

.num-xl { font-family: var(--font-serif); font-size: var(--fs-number-xl); color: var(--accent); line-height: 1; letter-spacing: var(--tr-tight); font-weight: 400; }
.num-lg { font-family: var(--font-serif); font-size: var(--fs-number-lg); color: var(--accent); line-height: 1; letter-spacing: var(--tr-tight); font-weight: 400; }
.num-md { font-family: var(--font-serif); font-size: var(--fs-number-md); color: var(--accent); line-height: 1; letter-spacing: var(--tr-tight); font-weight: 400; }

/* Surfaces ----------------------------------------------------------------- */
.surface-cream { background: var(--cream);  color: var(--fg-1); }
.surface-paper { background: var(--paper);  color: var(--fg-1); border: 1px solid var(--cream-3); }
.surface-navy  { background: var(--navy);   color: var(--fg-on-navy); }
.surface-navy h1, .surface-navy h2, .surface-navy h3,
.surface-navy .display { color: var(--fg-on-navy); }

/* Rules -------------------------------------------------------------------- */
hr.rule        { border: 0; border-top: var(--hr-thin); margin: var(--sp-5) 0; }
hr.rule-strong { border: 0; border-top: var(--hr-strong); margin: var(--sp-5) 0; }