/* =========================================================================
   Oska Health — Design Tokens
   Authoritative color + type variables extracted from the v2 slide template.
   Use these for any slide, web, or product surface. Change one place only.
   ========================================================================= */

/* -- Fonts ---------------------------------------------------------------
   Poppins is loaded from brand TTFs in /fonts.
   Roboto Mono is still pulled from Google Fonts (no brand TTF provided).
   ----------------------------------------------------------------------- */
@font-face { font-family:'Roboto Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('../fonts/RobotoMono-Variable.woff2') format('woff2'); }

@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/Poppins-Bold.ttf') format('truetype'); }
:root {
  /* ─── CORE PALETTE ──────────────────────────────────────────────── */
  --oska-dark-bg:        #1F2D36;   /* teal-charcoal — the ONE dark bg */
  --oska-light-bg:       #F8FAFB;   /* off-white — default light bg    */
  --oska-coral:          #F16261;   /* THE accent. Use sparingly.      */
  --oska-white:          #FFFFFF;

  /* ─── TEXT ─────────────────────────────────────────────────────── */
  --oska-text-dark:      #000308;   /* primary on light                */
  --oska-text-dark-alt:  #1F2E37;   /* secondary dark; agenda items    */
  --oska-text-body-dark: #283138;   /* body on light (softer black)    */
  --oska-text-muted:     #8A9299;   /* descriptions, subtitles         */
  --oska-text-white:     #FFFFFF;   /* all text on dark slides         */

  /* ─── SUPPORT ──────────────────────────────────────────────────── */
  --oska-chip-bg:        #FFF0F0;   /* light-pink time-code chip       */
  --oska-placeholder-bg: #F0F2F4;   /* empty visual placeholder rects  */
  --oska-rule-light:     #D0D5DA;   /* 0.75pt divider lines            */

  /* ─── SEMANTIC (web / product) ─────────────────────────────────── */
  --oska-fg-1:           var(--oska-text-dark);       /* headlines    */
  --oska-fg-2:           var(--oska-text-body-dark);  /* body         */
  --oska-fg-3:           var(--oska-text-muted);      /* captions     */
  --oska-fg-inverse:     var(--oska-white);
  --oska-bg-1:           var(--oska-light-bg);
  --oska-bg-2:           var(--oska-white);
  --oska-bg-inverse:     var(--oska-dark-bg);
  --oska-accent:         var(--oska-coral);
  --oska-rule:           var(--oska-rule-light);

  /* ─── TYPE FAMILIES ────────────────────────────────────────────── */
  --oska-font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --oska-font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ─── TYPE SCALE (pt → px ≈ 1.333×; values here are px for web) ── */
  --oska-size-title-xl:   72px;  /* title slide headline (54pt)        */
  --oska-size-title-lg:   48px;  /* dark-slide headline (36pt)         */
  --oska-size-h1:         32px;  /* content headline (24pt)            */
  --oska-size-h2:         24px;  /* divider subtitle                   */
  --oska-size-stat:       59px;  /* big stat number (44pt)             */
  --oska-size-eyebrow:    24px;  /* eyebrow (18pt)                     */
  --oska-size-subtitle:   27px;  /* title-slide subtitle (20pt)        */
  --oska-size-col-header: 24px;  /* column header (18pt)               */
  --oska-size-sub-header: 21px;  /* sub-header (16pt)                  */
  --oska-size-body:       21px;  /* body (16pt)                        */
  --oska-size-body-sm:    17px;  /* small body (13pt)                  */
  --oska-size-desc:       15px;  /* description (11pt)                 */
  --oska-size-caption:    13px;  /* time code / day-subtitle (10pt)    */
  --oska-size-footnote:   11px;  /* footnote (8pt)                     */

  /* ─── SPACING / LAYOUT ─────────────────────────────────────────── */
  --oska-space-1:  4px;
  --oska-space-2:  8px;
  --oska-space-3:  12px;
  --oska-space-4:  16px;
  --oska-space-5:  24px;
  --oska-space-6:  32px;
  --oska-space-7:  48px;
  --oska-space-8:  64px;

  --oska-radius-sm: 4px;
  --oska-radius-md: 8px;
  --oska-radius-lg: 14px;
  --oska-radius-pill: 999px;

  /* 1.5pt ≈ 2px at 96dpi */
  --oska-rule-thick: 2px;
}

/* =========================================================================
   Base element mapping — opt-in with a class on the root.
   Usage: <body class="oska"> … </body>
   ========================================================================= */

.oska {
  font-family: var(--oska-font-sans);
  color: var(--oska-fg-1);
  background: var(--oska-bg-1);
  font-feature-settings: 'ss01', 'kern';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.oska h1, .oska .h1 {
  font-family: var(--oska-font-sans);
  font-weight: 600;
  font-size: var(--oska-size-h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--oska-fg-1);
  margin: 0;
}

.oska h2, .oska .h2 {
  font-family: var(--oska-font-sans);
  font-weight: 600;
  font-size: var(--oska-size-h2);
  line-height: 1.2;
  color: var(--oska-fg-1);
  margin: 0;
}

.oska h3, .oska .h3 {
  font-family: var(--oska-font-sans);
  font-weight: 500;
  font-size: var(--oska-size-col-header);
  line-height: 1.3;
  color: var(--oska-fg-1);
  margin: 0;
}

.oska p, .oska .body {
  font-family: var(--oska-font-sans);
  font-weight: 400;
  font-size: var(--oska-size-body);
  line-height: 1.55;
  color: var(--oska-fg-2);
  margin: 0;
}

.oska .eyebrow {
  font-family: var(--oska-font-sans);
  font-weight: 600;
  font-size: var(--oska-size-eyebrow);
  letter-spacing: 0;
  color: var(--oska-accent);
  text-transform: none; /* Oska does NOT uppercase eyebrows */
}

.oska .caption,
.oska .timecode {
  font-family: var(--oska-font-mono);
  font-weight: 400;
  font-size: var(--oska-size-caption);
  color: var(--oska-accent);
}

.oska .muted {
  color: var(--oska-fg-3);
}

.oska .coral-rule {
  display: block;
  height: var(--oska-rule-thick);
  width: 65%;
  max-width: 520px;
  background: var(--oska-accent);
  border: 0;
  margin: 10px 0 24px;
}

/* Dark-bg utility */
.oska--dark {
  background: var(--oska-bg-inverse);
  color: var(--oska-fg-inverse);
}
.oska--dark h1, .oska--dark h2, .oska--dark h3, .oska--dark p {
  color: var(--oska-fg-inverse);
}
.oska--dark .muted { color: rgba(255,255,255,0.72); }

/* Time-code chip */
.oska .timecode-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--oska-chip-bg);
  color: var(--oska-accent);
  font-family: var(--oska-font-mono);
  font-size: var(--oska-size-caption);
  border-radius: 6px;
  line-height: 1;
}