/* ============================================================
   SpeakSoon Deck — Design System
   Tokens, reset, base typography
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {

  /* ── PALETTE ──────────────────────────────────────── */
  --bg:          #FFFFFF;
  --dark-bg:     #0F1014;
  --dark-bg-2:   #161920;

  --text:        #111111;       /* headings */
  --text-2:      #4B5563;       /* secondary body */
  --text-3:      #6B7280;       /* labels, hints */
  --text-inv:    #FFFFFF;
  --text-inv-2:  rgba(255,255,255,0.62);
  --text-inv-3:  rgba(255,255,255,0.35);

  --blue:        #3B6FFF;
  --blue-bg:     rgba(59,111,255,0.06);
  --blue-border: rgba(59,111,255,0.22);

  --purple:      #7C5CFC;
  --purple-bg:   rgba(124,92,252,0.06);
  --purple-border: rgba(124,92,252,0.22);

  --orange:      #E55A2B;       /* problem-slide accent */
  --orange-bg:   rgba(229,90,43,0.08);
  --orange-border: rgba(229,90,43,0.3);

  --card-bg:     #F9FAFB;
  --card-border: #E5E7EB;

  --rule:        #E5E7EB;       /* horizontal divider lines */
  --rule-dark:   rgba(255,255,255,0.09);

  /* ── FONTS ────────────────────────────────────────── */
  --f-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --f-logo: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* ── TYPE SCALE (1920×1080 canvas px) ──────────────── */
  --t-cover:  88px;    /* cover hero headline */
  --t-h1:     68px;    /* main slide headlines */
  --t-sub:    30px;    /* subtitle / subhead */
  --t-lead:   26px;    /* bold lead line */
  --t-body:   24px;    /* body */
  --t-small:  20px;    /* card body — minimum */
  --t-label:  20px;    /* section labels — minimum */
  --t-micro:  20px;    /* footnotes — minimum */

  /* ── TRACKING ─────────────────────────────────────── */
  --ls-cover:  -0.05em;
  --ls-h1:     -0.05em;
  --ls-body:   -0.03em;
  --ls-label:  0.14em;
  --ls-logo:   -0.05em;   /* Plus Jakarta for SpeakSoon */

  /* ── LINE HEIGHT ──────────────────────────────────── */
  --lh-tight:   1.06;
  --lh-snug:    1.20;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  /* ── RADIUS ───────────────────────────────────────── */
  --r:     12px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  24px;
  --r-pill: 100px;

  /* ── SPACING ──────────────────────────────────────── */
  --px:    88px;     /* slide horizontal padding */
  --py:    52px;     /* slide top/bottom padding */

  /* ── NAV ──────────────────────────────────────────── */
  --nav-h: 60px;

}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1A1A1A;
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

em      { font-style: normal; }
strong  { font-weight: 700; letter-spacing: -0.05em; }