/* ============================================================
   St1 Design System — Colors & Type
   Derived from the St1 PowerPoint template theme1.xml + logo.
   ============================================================ */

/* --- Fonts: Gotham is the brand face. Montserrat is the nearest
       open-licensed substitute, self-hosted so we don't depend on
       fonts.googleapis.com at the venue (blocked by some iOS content
       blockers; also flaky on slow mobile networks).
       FLAG: swap for licensed Gotham files in fonts/ when available. */
@import url('montserrat.css');

:root {
  /* -------- Brand palette (exact, from theme1.xml) -------- */
  --st1-red: #ED1B2E;          /* primary brand / accent4 / hlink */
  --st1-red-dark: #B31422;     /* derived — hover/press */
  --st1-red-darker: #7A0D17;   /* derived — dark surfaces */
  --st1-yellow: #E5BF21;       /* accent1 — logo secondary */
  --st1-yellow-deep: #C9A418;  /* derived */
  --st1-yellow-cream: #FBE3AC; /* lt2 — soft tints, protection gradients */
  --st1-green: #12663A;        /* accent3 — renewable / CO2 reduction */
  --st1-green-soft: #1E8A4F;   /* derived */
  --st1-teal: #67A9B9;         /* accent2 — secondary data / cool */
  --st1-teal-light: #85C8D2;   /* dk1 — surfaces */
  --st1-teal-pale: #E3F0F3;    /* derived */

  /* -------- Neutrals -------- */
  --st1-black: #111111;
  --st1-ink: #1A1A1A;          /* body text on light */
  --st1-gray-900: #2B2B2B;
  --st1-gray-700: #4F4F4F;
  --st1-gray-600: #6B6B6B;     /* accent5 */
  --st1-gray-500: #909090;     /* accent6 */
  --st1-gray-300: #C9C9C9;
  --st1-gray-200: #E4E4E4;
  --st1-gray-100: #F1F1F1;
  --st1-gray-50:  #F8F8F8;
  --st1-white: #FFFFFF;

  /* -------- Semantic foreground / background -------- */
  --fg-1: var(--st1-ink);              /* body */
  --fg-2: var(--st1-gray-700);         /* secondary */
  --fg-3: var(--st1-gray-500);         /* tertiary / captions */
  --fg-inverse: var(--st1-white);
  --fg-brand: var(--st1-red);

  --bg-1: var(--st1-white);            /* base surface */
  --bg-2: var(--st1-gray-50);          /* elevated section */
  --bg-3: var(--st1-gray-100);
  --bg-ink: var(--st1-black);          /* dark brand surface */
  --bg-brand: var(--st1-red);          /* red hero */
  --bg-cream: var(--st1-yellow-cream); /* warm brand tint */

  --border-1: var(--st1-gray-200);
  --border-2: var(--st1-gray-300);
  --border-strong: var(--st1-ink);

  /* -------- Feedback -------- */
  --success: var(--st1-green);
  --warning: var(--st1-yellow-deep);
  --danger:  var(--st1-red);
  --info:    var(--st1-teal);

  /* -------- Radii -------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

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

  /* -------- Shadows (crisp, low-diffusion — matches print roots) -- */
  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06), 0 1px 1px rgba(17,17,17,0.04);
  --shadow-md: 0 4px 10px rgba(17,17,17,0.08), 0 1px 2px rgba(17,17,17,0.05);
  --shadow-lg: 0 12px 28px rgba(17,17,17,0.12), 0 2px 6px rgba(17,17,17,0.06);
  --shadow-brand: 0 6px 18px rgba(237,27,46,0.28);

  /* -------- Type stack --------
     St1's licensed brand face is "Gotham Office" (desktop/office variant
     of Gotham). We prefer it when present on the viewer's machine and
     fall back to Gotham, then Montserrat, then system UI. */
  --font-sans: 'Gotham Office', 'GothamOffice', 'Gotham Office A', 'Gotham',
               'Gotham A', 'Gotham SSm', 'Montserrat',
               ui-sans-serif, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* -------- Type scale (display → caption) -- rooted in 60/36/20 pt template -- */
  --size-display:   60px;  /* St1 presentation title */
  --size-h1:        44px;  /* section hero */
  --size-h2:        36px;  /* PowerPoint title */
  --size-h3:        28px;
  --size-h4:        22px;
  --size-lg:        20px;  /* level 1 body */
  --size-body:      16px;
  --size-sm:        14px;
  --size-xs:        12px;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;
}

/* ---------- Base elements -------------------------------------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--size-display); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }
h5 { font-size: var(--size-lg); }

p  { font-size: var(--size-body); line-height: var(--leading-relaxed); color: var(--fg-1); margin: 0; text-wrap: pretty; }
.lead { font-size: var(--size-lg); line-height: var(--leading-normal); color: var(--fg-2); }
small, .caption { font-size: var(--size-xs); color: var(--fg-3); letter-spacing: var(--tracking-wide); }
.eyebrow {
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--st1-red);
}

code, pre { font-family: var(--font-mono); font-size: 0.95em; }

a { color: var(--st1-red); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--st1-red-dark); }

/* ---------- Utility classes ---------------------------------- */
.txt-display   { font-size: var(--size-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.txt-h1        { font-size: var(--size-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.txt-h2        { font-size: var(--size-h2); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.txt-h3        { font-size: var(--size-h3); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.txt-body-lg   { font-size: var(--size-lg); line-height: var(--leading-normal); }
.txt-body      { font-size: var(--size-body); line-height: var(--leading-relaxed); }
.txt-caption   { font-size: var(--size-xs); color: var(--fg-3); letter-spacing: var(--tracking-wide); }

.bg-brand { background: var(--st1-red); color: var(--st1-white); }
.bg-ink   { background: var(--st1-black); color: var(--st1-white); }
.bg-cream { background: var(--st1-yellow-cream); color: var(--st1-ink); }
.bg-green { background: var(--st1-green); color: var(--st1-white); }
.bg-teal  { background: var(--st1-teal); color: var(--st1-white); }