/* ============================================================
   LIZAL DESIGN SYSTEM — Foundations
   Editorial materials palette · Newsreader serif + Switzer sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&f[]=jetbrains-mono@400,500&display=swap');

:root {
  /* ------------------------------------------------------------
     COLOR — Editorial Materials Palette
     ------------------------------------------------------------ */

  /* Paper / surfaces */
  --paper:        #F4EFE6;   /* primary background — warm cream */
  --paper-2:      #ECE5D7;   /* sunken / alt section */
  --paper-3:      #E2D9C5;   /* deeper card / divider band */
  --bone:         #FAF6EE;   /* lifted / lightest */
  --white:        #FFFFFF;

  /* Ink / type */
  --ink:          #1B1B1B;   /* primary text, near-black */
  --ink-2:        #3D3938;   /* secondary text */
  --ink-3:        #6B6660;   /* tertiary / metadata */
  --ink-4:        #9A958C;   /* hint / disabled */
  --rule:         #C8BFA8;   /* hairline rule on paper */
  --rule-2:       #1B1B1B14; /* 8% ink rule */

  /* Brand — Navy + Teal (from the existing Lizal logo) */
  --navy:         #003050;   /* PRIMARY — wordmark, headlines on light, deck dark slides */
  --navy-dark:    #001A2E;
  --navy-deep:    #001020;
  --teal:         #00D0D0;   /* SECONDARY — accent, the L of the wordmark, the i-dot */
  --teal-dark:    #00A8A8;
  --teal-light:   #B8F0F0;

  /* Earth — warm neutrals (kept for editorial restraint on paper) */
  --stone:        #7A6B52;
  --stone-light:  #B7AB91;
  --stone-dark:   #4D4332;

  /* Editorial accents (used SPARINGLY — for warmth in long copy decks) */
  --ochre:        #C9A86A;
  --ochre-dark:   #A6884B;
  --ochre-light:  #E2C58A;
  --brick:        #8B3A1F;
  --brick-dark:   #6B2A12;
  --brick-light:  #B85838;

  /* Functional */
  --success:      #5C7A3A;
  --danger:       #8B3A1F;
  --info:         var(--teal-dark);

  /* Client accent slot — overridden per-deck.
     Default falls back to teal (Lizal's own). Decks set --client-accent
     on a wrapper to absorb client palette (e.g. Canada Red). */
  --client-accent:        var(--teal);
  --client-accent-on:     #FFFFFF;
  --client-accent-soft:   color-mix(in oklab, var(--client-accent) 14%, var(--paper));

  /* Semantic surfaces */
  --bg:           var(--paper);
  --bg-sunken:    var(--paper-2);
  --bg-lifted:    var(--bone);
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-muted:     var(--ink-4);
  --accent:       var(--teal);
  --accent-2:     var(--navy);

  /* ------------------------------------------------------------
     TYPE — Newsreader (display serif) + Switzer (grotesque)
     ------------------------------------------------------------ */

  --font-serif:   'Newsreader', 'Times New Roman', Georgia, serif;
  --font-sans:    'Switzer', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Type scale — used for slides, web, print.
     Slide deck base is 16px @ 1920px; scale up via `em` in slides. */
  --t-display:    clamp(56px, 8vw, 120px);
  --t-h1:         clamp(40px, 5vw, 72px);
  --t-h2:         clamp(28px, 3.4vw, 48px);
  --t-h3:         22px;
  --t-h4:         18px;
  --t-body:       16px;
  --t-small:      14px;
  --t-micro:      12px;
  --t-eyebrow:    11px;

  /* Letter-spacing */
  --tr-tight:     -0.02em;
  --tr-snug:      -0.01em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-wider:     0.16em;   /* eyebrow / section labels */
  --tr-widest:    0.28em;   /* SECTION HEADERS */

  /* Line heights */
  --lh-display:   0.96;
  --lh-tight:     1.08;
  --lh-snug:      1.2;
  --lh-body:      1.55;
  --lh-relaxed:   1.7;

  /* ------------------------------------------------------------
     SPACING — 4px grid; named tokens for layout density
     ------------------------------------------------------------ */
  --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;
  --s-11:  160px;

  /* Corners — Lizal is restrained: small radii, mostly squared */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* Borders */
  --bw-hair: 0.5px;
  --bw-1:    1px;
  --bw-2:    2px;

  /* Elevation — kept subtle; Lizal uses rules and color, not shadow */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(27, 27, 27, 0.04), 0 1px 1px rgba(27, 27, 27, 0.03);
  --shadow-2: 0 4px 14px rgba(27, 27, 27, 0.06), 0 1px 3px rgba(27, 27, 27, 0.04);
  --shadow-3: 0 18px 40px rgba(27, 27, 27, 0.10), 0 6px 12px rgba(27, 27, 27, 0.06);

  /* Motion */
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:      150ms;
  --dur:           240ms;
  --dur-slow:      420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes; do not restyle from scratch.
   ============================================================ */

.lz-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  font-variation-settings: "opsz" 72;
}
.lz-display em,
.lz-display i { font-style: italic; font-variation-settings: "opsz" 72; }

.lz-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-snug);
  color: var(--ink);
  font-variation-settings: "opsz" 48;
}

.lz-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-snug);
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}

.lz-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--ink);
}

.lz-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--ink);
}

.lz-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

.lz-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.lz-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
}

.lz-micro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.lz-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--ink);
}

/* SECTION HEADER — the "T H E   O P P O R T U N I T Y" treatment.
   Sets every glyph as its own letter with extreme tracking. */
.lz-section-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--ink);
}

/* MONO — used for SKUs, refs, codes, specs labels */
.lz-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.lz-mono-sm {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Big stat numbers — used in "$3.8B / 13 / 9.7%" stat blocks */
.lz-stat {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  font-variation-settings: "opsz" 60;
}

/* Italic editorial pull — "what they're doing" / quotes */
.lz-pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.3;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}

/* ============================================================
   PRIMITIVES
   ============================================================ */

.lz-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.lz-rule-ink {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: 0;
}

/* Tag / chip — used for filters, sourcing categories */
.lz-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: transparent;
}

/* Buttons */
.lz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.lz-btn:hover { opacity: 0.85; }
.lz-btn:active { transform: translateY(1px); }

.lz-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.lz-btn-ghost:hover { background: var(--ink); color: var(--bone); opacity: 1; }

/* Footer line — appears on every deck slide */
.lz-footer-line {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* Page base — apply on body for paper feel */
.lz-page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle paper texture (optional, drop-in via class) */
.lz-paper-grain {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(122, 107, 82, 0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(139, 58, 31, 0.03) 0, transparent 50%);
  background-color: var(--paper);
}