/* Afflo Presenter — base tokens, aligned with Afflo Visual Brand 2026.
   Nord-rooted color system; Montserrat (display) + Inter (body) typography. */

/* === FORCE LIGHT MODE ===
   Ignore the OS / browser dark mode preference. Our deck uses
   Vigil (#4c566a) on Theater (#eceff4) as canonical light, and
   Vigil-gradient as canonical "dark impact" — both are deliberate
   brand decisions and must not be inverted by the user agent.
   This affects: form controls, scrollbars, default <iframe> chrome,
   and the brief unstyled-flash before CSS loads. */
:root {
  color-scheme: light;
}
html, body {
  background-color: #eceff4; /* var(--theater) -- hardcoded so it applies pre-CSS-load */
  color: #2e3440;            /* var(--ink) */
}

:root {
  /* === COLOR — Afflo Nord palette (canonical) === */
  --vigil:       #4c566a;  /* Primary brand */
  --vigil-d:     #3b4252;
  --vigil-l:     #434c5e;
  --perfusion:   #5eb796;  /* Success / accent / "go" states */
  --recovery:    #a8e296;  /* Soft positive */
  --cold-chain:  #acdeff;  /* Light data */
  --allocation:  #68bcff;  /* Process / data flow */
  --theater:     #eceff4;  /* Light surface */
  --discharge:   #e7f0e4;  /* Success messages */
  --ink:         #2e3440;  /* Body text, deep UI */
  --mist:        #d8dee9;  /* Borders / subtle dividers */

  /* Semantic states */
  --warn:        #d08770;
  --critical:    #bf616a;

  /* === TYPOGRAPHY === */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* === STRUCTURAL === */
  --rule-weight: 3px;
  --slide-pad-x: 80px;
  --slide-pad-y: 90px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--theater); color: var(--ink); }

/* === HORIZONTAL RULE SYSTEM (from canonical brand) === */
.rule { display: block; width: 100%; height: var(--rule-weight); background: var(--ink); margin: 0; }
.rule--top { margin-bottom: 32px; }
.rule--bottom { margin-top: 32px; }
.rule--accent { background: var(--perfusion); }
.rule--thin { height: 1px; background: rgba(76,86,106,.18); }

/* === SECTION HEADER PATTERN === */
.sec-header { margin-bottom: 56px; }
.sec-header .rule { margin-bottom: 20px; }
.sec-meta { display: flex; align-items: baseline; gap: 24px; margin-bottom: 16px; }
.sec-num,
.sec-label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  opacity: .4;
}

/* === TYPOGRAPHY SCALE === */
.at { font-family: var(--font-display); }
.d1 { font-size: clamp(52px, 6.5vw, 96px); line-height: .98; font-weight: 900; letter-spacing: -2px; }
.d2 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.0; font-weight: 800; letter-spacing: -1px; }
.d3 { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.15; font-weight: 700; }
.d4 { font-size: clamp(16px, 1.8vw, 22px); font-weight: 600; }
.b1 { font-size: 15px; line-height: 1.85; font-weight: 300; max-width: 600px; opacity: .7; }
.label {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; opacity: .45; margin-bottom: 14px;
}

/* === REVEAL ANIMATION === */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.rv.on { opacity: 1; transform: none; }

/* === DARK SECTION UTILITY === */
.sec-dark { background: var(--vigil) !important; color: #fff; }
.sec-dark .rule { background: rgba(255,255,255,.9); }
.sec-dark .rule--thin { background: rgba(255,255,255,.15); }
.sec-dark .sec-num,
.sec-dark .sec-label { opacity: .35; }
.sec-dark .b1 { opacity: .72; }