/* ============================================================================
   THEME · Pulse (Webinar Home) for the <deck-stage> engine.
   Foundations = the Pulse dashboard tokens (Inter + Instrument Serif + IBM Plex
   Mono, violet accent, hairline cards on a soft grey canvas, near-black dark
   tiles). Components read only the semantic layer below.
   ============================================================================ */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/instrument-serif-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/instrument-serif-400-italic.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-mono-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-mono-500-normal.woff2") format("woff2"); }

:root {
  /* 1. FOUNDATIONS */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --brand-paper:        #F3F3F4;
  --brand-paper-2:      #FFFFFF;
  --brand-ink:          #0E0E11;
  --brand-muted:        #8A8A94;
  --brand-accent:       #6A4DF2;
  --brand-accent-soft:  #A08CFF;
  --brand-second:       #6A4DF2;
  --brand-second-soft:  #A08CFF;
  --brand-white:        #FFFFFF;
  --brand-dark:         #141418;
  --brand-dark-line:    #26262C;
  --brand-line:         #E9E9EC;
  --brand-line-2:       #DEDEDF;
  --brand-inset:        #F4F4F5;
  --k1:#7C83F3; --k2:#EF7FAE; --k3:#3FBE86; --k4:#EFA963; --k6:#63A9E8; --crit:#D9534F;
  --w-display: 400;

  /* 2. SEMANTIC */
  --serif: var(--font-serif);
  --sans:  var(--font-sans);
  --mono:  var(--font-mono);
  --bg:          var(--brand-paper);
  --bg-alt:      var(--brand-inset);
  --bg-dark:     var(--brand-dark);
  --surface:     var(--brand-white);
  --fg:          var(--brand-ink);
  --fg-muted:    var(--brand-muted);
  --fg-inverse:  #F4F4F6;
  --fg-accent:   var(--brand-accent);
  --fg-accent-soft: var(--brand-accent-soft);
  --fg-second:   var(--brand-second);
  --fg-second-soft: var(--brand-second-soft);
  --hair:        var(--brand-line);
  --hair-strong: var(--brand-line-2);
  --hair-inv:        var(--brand-dark-line);
  --hair-inv-strong: #33333A;

  /* 3. SCALE (px on the 1920×1080 canvas) */
  --type-display:  118px;
  --type-title:     78px;
  --type-subtitle:  36px;
  --type-body:      30px;
  --type-meta:      22px;
  --type-stat:     170px;
  --pad-x:         120px;
  --pad-top:        96px;
  --pad-bottom:     96px;
  --gap-title:      44px;
  --gap-item:       22px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --elev-media: 0 2px 4px rgba(14,14,17,.05), 0 40px 90px -36px rgba(14,14,17,.32);
  --elev-card:  0 1px 2px rgba(14,14,17,.06), 0 1px 1px rgba(14,14,17,.04);
  --ease-out: cubic-bezier(.22,.8,.22,1);
}

html, body { margin: 0; padding: 0; background: #0b0b0d; }
deck-stage { background: #0b0b0d; }