/* ============================================================
   Scroll Media — Colors & Type
   Client-facing (light) aesthetic. Used for kickoff decks,
   strategy reviews, proposals, and live sales tools.
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
/* DEPRECATED: Sabon LT Pro is retained for backwards compatibility only.
   Do not use in new work. The brand voice is carried by Source Sans 3.
   No editorial italic register, no serif pull quotes, no oversized
   quotation marks. Type carries the brand. */
@font-face {
  font-family: 'Sabon LT Pro';
  src: url('fonts/SabonLTPro-Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Visby';
  src: url('fonts/Visby-Heavy.otf') format('opentype'),
       url('fonts/Visby-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== BRAND COLORS (named) ===== */
  --ghost:        #fafdff;  /* primary background */
  --azure:        #0c3387;  /* headlines, primary brand */
  --lucid:        #cbe9ff;  /* accent panels, secondary surfaces */
  --highlighter:  #e2ed7a;  /* signal only — dates, priority, key moments */
  --shadow:       #151516;  /* body text */
  --porcelain:    #f1eee7;  /* DEPRECATED: warm paper neutral. Retained for backwards
                               compatibility only. Do not use on new surfaces.
                               Editorial register is not part of the locked aesthetic. */

  /* Tints & values derived from brand */
  --azure-900:    #071d4f;
  --azure-800:    #0c3387;  /* = azure */
  --azure-600:    #254fb0;
  --azure-400:    #7a9ad8;
  --azure-200:    #b9cdee;
  --lucid-deep:   #9ecee8;
  --lucid-soft:   #e4f3ff;

  /* ===== SEMANTIC COLOR TOKENS ===== */
  --bg:           var(--ghost);
  --bg-alt:       var(--lucid-soft);
  --bg-panel:     var(--lucid);
  --bg-paper:     var(--porcelain);

  --fg:           var(--shadow);          /* body text */
  --fg-heading:   var(--azure);           /* headlines, brand voice */
  --fg-muted:     #5a6070;                /* secondary labels */
  --fg-subtle:    #9097a6;                /* tertiary, metadata */
  --fg-on-azure:  var(--ghost);           /* text on navy */

  --accent:       var(--lucid);
  --signal:       var(--highlighter);     /* sparingly: max 1–2 per slide */

  --rule:         rgba(12, 51, 135, 0.20);    /* hairline dividers (0.5pt @ 20%) */
  --rule-strong:  rgba(12, 51, 135, 0.40);
  --rule-faint:   rgba(12, 51, 135, 0.08);

  /* ===== TYPE SYSTEM ===== */
  --font-sans:     'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-serif:    'Sabon LT Pro', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-display:  'Visby', 'Source Sans 3', ui-sans-serif, sans-serif; /* brand/logotype only */

  /* Base type (for web/docs — decks use fixed pt sizes below) */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Deck-specific sizes (1920×1080) */
  --deck-h1:       52px;   /* headline max */
  --deck-h1-min:   40px;
  --deck-h2:       32px;
  --deck-h3:       24px;
  --deck-sub:      22px;   /* subheadline */
  --deck-body:     16px;
  --deck-body-sm:  14px;
  --deck-label:    12px;   /* letter-spaced small caps */
  --deck-meta:     11px;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;  /* small labels */
  --tracking-wider:  0.14em;  /* all-caps eyebrow */

  /* ===== SPACING ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;   /* slide margin */
  --space-8:  56px;
  --space-9:  80px;
  --space-10: 120px;

  /* ===== BORDERS, RADII, RULES ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--rule);
  --border-soft:     1px solid var(--rule-faint);
  --border-strong:   1.5px solid var(--azure);

  /* ===== ELEVATION ===== */
  /* Editorial: almost no shadow. Used sparingly. */
  --shadow-sm:  0 1px 2px rgba(12, 51, 135, 0.06);
  --shadow-md:  0 6px 24px rgba(12, 51, 135, 0.08);
  --shadow-lg:  0 18px 60px rgba(12, 51, 135, 0.10);
}

/* ============================================================
   Semantic element defaults
   (use these utility classes on stand-alone pages; decks define
    their own slide styles but source sizes from the vars above)
   ============================================================ */
.scroll-body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h1, h1.scroll {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--deck-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-heading);
  margin: 0;
  text-wrap: balance;
}
.h2, h2.scroll {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--deck-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-heading);
  margin: 0;
  text-wrap: balance;
}
.h3, h3.scroll {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--deck-h3);
  line-height: var(--lh-snug);
  color: var(--fg-heading);
  margin: 0;
}
.subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--deck-sub);
  line-height: var(--lh-snug);
  color: var(--fg-heading);
}
.body, p.scroll {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--deck-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
}
.body-sm {
  font-size: var(--deck-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--deck-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-heading);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--deck-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-heading);
}
.meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--deck-meta);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
}

/* Signal treatment for dates / priorities / key moments.
   Rule: max 1–2 per slide. */
.signal {
  background: var(--signal);
  color: var(--shadow);
  padding: 0.08em 0.4em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Hairline divider used between logo row and content */
.rule-hairline {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}