/* ============================================================
   Zephyr Design System — Colors & Typography
   Source: Zephyr_Brand_Guidelines_v2.docx + zephyr-brand.skill v3.0
   ============================================================ */

/* Default Office fonts — Calibri ships natively in PowerPoint, Word,
   and modern macOS/Windows. No webfont import; everything renders 1:1
   in Office and on the web. */

/* ---------- Color tokens ---------- */
:root {
  /* Primary — navy / steel family */
  --z-navy:          #1A2744;  /* Primary brand; dark backgrounds, title slides */
  --z-navy-dark:     #111C33;  /* Subtle gradient overlay on navy */
  --z-steel:         #3B6B8A;  /* Secondary headers, logo chevron */
  --z-steel-light:   #5A9EBF;  /* Chart secondary, accent details */

  /* Accents — used sparingly, high-signal only */
  --z-amber:         #D4953A;  /* PRIMARY accent — callout numbers, section labels on dark, keyword emphasis */
  --z-amber-warm:    #E8A849;  /* Taglines / warm highlights on dark */
  --z-teal:          #1B9AAA;  /* Card/section headers on dark, icon circles, chart primary */
  --z-danger:        #C0392B;  /* Destructive actions — delete buttons, error states */
  --z-danger-hover:  #A83224;  /* Hover on danger */

  /* Semantic — mapped to existing brand palette (no separate semantic colors) */
  --z-risk:        var(--z-navy);   /* Before / loss state — Navy */
  --z-resilience:  var(--z-teal);   /* After / hardened state — Teal */
  --z-highlight:   var(--z-amber);  /* Spotlight stat — Amber */
  /* Legacy aliases (kept for backwards compatibility) */
  --z-sage:          var(--z-resilience);
  --z-red:           var(--z-risk);

  /* Neutrals */
  --z-off-white:     #F5F6F8;  /* Light background */
  --z-white:         #FFFFFF;
  --z-light-gray:    #E8EBF0;  /* Dividers, table borders, subtle fills */

  /* Text */
  --z-charcoal:      #3A3530;  /* Warm Charcoal — DEFAULT body text on light */
  --z-body:          #5C5650;  /* Warm body text — secondary on light */
  --z-body-cool:     #3A4656;  /* Cooler secondary body text (v3 skill) */
  --z-mid-gray:      #8A8580;  /* Warm Mid Gray — captions, footnotes, confidentiality */

  /* ---------- Semantic aliases ---------- */
  --bg-primary:      var(--z-off-white);
  --bg-inverted:     var(--z-navy);
  --bg-card:         var(--z-white);
  --bg-subtle:       var(--z-light-gray);

  --fg-primary:      var(--z-charcoal);
  --fg-secondary:    var(--z-body);
  --fg-muted:        var(--z-mid-gray);
  --fg-inverted:     var(--z-white);

  --fg-heading:      var(--z-navy);          /* Headers on light bg */
  --fg-heading-inv:  var(--z-white);         /* Headers on dark bg */
  --fg-label:        var(--z-steel);         /* Section label on light */
  --fg-label-inv:    var(--z-amber);         /* Section label on dark */
  --fg-link:         var(--z-steel);
  --fg-accent:       var(--z-amber);

  --border-subtle:   var(--z-light-gray);
  --border-strong:   var(--z-steel);

  /* ---------- Typography ---------- */
  --font-sans: Calibri, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Calibri, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale — presentation (16:9 slides, 10" = 1280px reference) */
  --fs-title:         32pt;   /* slide/page title — REGULAR weight, not bold */
  --fs-section-hdr:   24pt;   /* bold */
  --fs-subtitle:      20pt;
  --fs-callout-stat:  28pt;   /* MAX, do not exceed */
  --fs-body-slide:    15pt;
  --fs-body-small:    13pt;
  --fs-callout-label: 12pt;
  --fs-section-label: 13pt;   /* ALL CAPS, bold */
  --fs-caption:       10pt;   /* Warm Mid Gray */
  --fs-footer:        8pt;    /* ALL CAPS confidentiality */

  /* Type scale — document (11pt body base) */
  --fs-doc-h1:        18pt;
  --fs-doc-h2:        14pt;
  --fs-doc-h3:        12pt;
  --fs-doc-body:      11pt;
  --fs-doc-caption:   9pt;

  /* Letter spacing */
  --ls-wordmark:     0.22em;   /* "ZEPHYR" as display element */
  --ls-section:      0.12em;   /* section labels, ALL CAPS */
  --ls-footer:       0.08em;   /* confidentiality footer */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.35;
  --lh-loose:   1.5;

  /* ---------- Spacing (grid reference: 10" × 5.625" slide) ---------- */
  --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;

  /* Slide edge margin ≈ 0.6" */
  --slide-margin: 5%;

  /* ---------- Shape / elevation ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Card shadow — blur 4, offset 2, 135°, 12% black */
  --shadow-card:    1.4px 1.4px 4px rgba(0, 0, 0, 0.12);
  --shadow-elev:    2px 2px 8px rgba(0, 0, 0, 0.14);
  --shadow-hover:   3px 3px 12px rgba(26, 39, 68, 0.18);

  /* ---------- Structural accent ---------- */
  --accent-bar-h: 3px;  /* thin amber/steel bar */
}

/* ============================================================
   Semantic element styles — ready to use on any page
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-primary);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, .z-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;                /* Titles are REGULAR, not bold — brand rule */
  color: var(--fg-heading);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
}

h2, .z-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-section-hdr);
  font-weight: 700;
  color: var(--fg-heading);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3) 0;
  text-wrap: pretty;
}

h3, .z-h3 {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: var(--fg-heading);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3) 0;
}

p, .z-body {
  font-size: var(--fs-body-slide);
  color: var(--fg-primary);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-3) 0;
  text-align: left;
  text-wrap: pretty;
}

/* Callout stat — the big number */
.z-stat {
  font-size: var(--fs-callout-stat);
  font-weight: 700;
  color: var(--z-amber);
  line-height: 1;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1;
}

.z-stat-label {
  font-size: var(--fs-callout-label);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

/* Section label — small, ALL CAPS, bold */
.z-section-label {
  display: inline-block;
  font-size: var(--fs-section-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-section);
  color: var(--fg-label);
}
.z-section-label.on-dark { color: var(--fg-label-inv); }

/* Subtitle / tagline */
.z-subtitle {
  font-size: var(--fs-subtitle);
  font-weight: 400;
  color: var(--z-steel);
  line-height: var(--lh-snug);
}
.z-subtitle.on-dark { color: var(--z-amber-warm); }

/* Wordmark — "ZEPHYR" as display text */
.z-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
}

/* Caption / source citation — Warm Mid Gray */
.z-caption, figcaption, .z-source {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

/* SOURCE: Organization (Year) format */
.z-source::before { content: "SOURCE: "; font-weight: 700; }

/* Confidentiality footer — ALL CAPS, en-dash */
.z-footer-confidential {
  font-size: var(--fs-footer);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-footer);
  font-weight: 400;
}
.z-footer-confidential::before { content: "CONFIDENTIAL \2013  NOT FOR DISTRIBUTION"; }

/* Links */
a, .z-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 120ms ease;
}
a:hover { color: var(--z-navy); }

/* Strong emphasis — keyword spotlighting with amber */
.z-spotlight { color: var(--z-amber); font-weight: 700; }

/* Bullets — brand hierarchy */
.z-bullets { list-style: none; padding: 0; margin: 0; }
.z-bullets > li { position: relative; padding-left: 1.1em; margin-bottom: 0.4em; line-height: var(--lh-body); }
.z-bullets > li::before { content: "\2022"; position: absolute; left: 0; color: var(--z-charcoal); }
.z-bullets .l2 { padding-left: 1.1em; }
.z-bullets .l2::before { content: "\2013"; }    /* en-dash */
.z-bullets .l3 { padding-left: 1.1em; }
.z-bullets .l3::before { content: "\25CB"; font-size: 0.8em; top: 0.1em; } /* hollow bullet */

/* Dark-mode helpers — apply by adding .on-dark or wrapping in .z-dark */
.z-dark, .z-dark-bg {
  background: var(--z-navy);
  color: var(--z-white);
}
.z-dark h1, .z-dark h2, .z-dark h3, .z-dark .z-h1, .z-dark .z-h2, .z-dark .z-h3 { color: var(--z-white); }
.z-dark p, .z-dark .z-body { color: var(--z-off-white); }
.z-dark .z-subtitle { color: var(--z-amber-warm); }
.z-dark .z-section-label { color: var(--fg-label-inv); }

/* Steel-Blue decorative accent (top-left of every content slide) */
.z-accent-bar {
  display: block;
  width: 80px;
  height: var(--accent-bar-h);
  background: var(--z-steel);
}
.z-accent-bar--amber { background: var(--z-amber); }

/* Card */
.z-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.z-dark .z-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Subtle navy gradient overlay (for dark hero) */
.z-navy-gradient {
  background: linear-gradient(160deg, var(--z-navy) 0%, var(--z-navy-dark) 100%);
}