:root {
  /* ═══ Colour scheme (#1022 — root cause of invisible native controls) ═══
     BLC is a dark-only app, but nothing ever told the UA that. Without this
     declaration every native control (date pickers and their calendar icons,
     <select> dropdown lists, scrollbars, checkboxes/radios, spinners) renders
     with the LIGHT UA palette — which is why calendar glyphs painted dark-on-dark
     and disappeared. Four date inputs in index.html had been patched one at a
     time with inline `color-scheme:dark`; this declares it ONCE at the root so
     all 20 date inputs and every other native widget inherit it.
     Do NOT add per-control color-scheme declarations — fix it here. */
  color-scheme: dark;

  /* ═══ Placeholder contrast (#1034 — native dark-scheme default is too dim) ═══
     Chrome's dark colour-scheme placeholder default is #757575, which misses AA
     across BLC's dark input surfaces. Declare one root-level pseudo-element rule
     so every placeholder is legible; entered control text keeps its own colour. */
  --text-placeholder: var(--text-secondary);

  /* ═══ Background ═══ */
  --bg-base-top: #1b1b1d;
  --bg-base-mid: #131315;
  --bg-base-bottom: #0e0e10;

  /* ═══ Kingdom Colors ═══ */
  --kingdom-ibm: #b2c5ff;
  --kingdom-pcr: #ffb1c1;
  --kingdom-eos: #aa66ee;
  --kingdom-culture: #2dd4a8;
  --accent-cyan: #00daf3;
  --accent-gold: #ffd866;

  /* ═══ Design-kit alignment (student-app/student-kit.jsx) ═══
     The kit is the single source of truth for kingdom colour. Two names for
     the same kingdom already diverged here: --kingdom-ibm holds #b2c5ff, the
     M3 periwinkle, NOT IBM blue. These are the kit's own values, added
     additively so nothing existing shifts. New work consumes these. */
  --k-ibm:  #5588ff;  --k-ibm-soft: #8fb0ff;
  --k-pcr:  #ff5599;  --k-pcr-soft: #ff8fbc;
  --k-eos:  #aa66ee;  --k-eos-soft: #c79bf5;
  --k-cc:   #2dd4a8;  --k-cc-soft:  #6ee7c4;
  --k-cyan: #00daf3;  /* kit tertiary — events / calendar / Glossary */
  --k-gold: #ffd866;  /* kit — XP, spark, premium */

  /* ═══ Student section families ═══
     Navigation owns section identity. Hub destinations consume these aliases so
     their colour cannot drift away from the persistent bottom nav. */
  --section-home: var(--blc-student-nav-home);
  --section-learn: var(--blc-student-nav-school);
  --section-community: var(--blc-student-nav-groups);
  --section-progress: var(--blc-student-nav-leaderboard);
  --section-record: var(--blc-student-nav-mic);

  /* ═══ Panels ═══ */
  --panel-top: rgba(40, 38, 44, 1);
  --panel-bottom: rgba(20, 19, 21, 1);
  --panel-radius: 18px;
  --panel-stroke: rgba(255, 255, 255, 0.12);
  --panel-shadow: 0 16px 24px rgba(0, 0, 0, 0.80);
  --panel-inner-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.20);

  /* ═══ Stat tiles ═══ */
  --tile-top: rgba(55, 45, 75, 1);
  --tile-bottom: rgba(22, 18, 35, 1);
  --tile-radius: 12px;
  --tile-stroke: rgba(255, 255, 255, 0.12);
  --tile-shadow: 0 8px 16px 2px rgba(0, 0, 0, 0.80);

  /* ═══ Cards ═══ */
  --card-radius: 14px;
  --card-stroke: rgba(255, 255, 255, 0.10);
  --card-shadow: 0 6px 10px rgba(0, 0, 0, 0.50);

  /* ═══ Destination-card palette (#1114) ═══
     ONE shared palette of eight visually distinct hues for hub destination cards
     (Home / Learn / Community / Progress). Section identity lives in the bottom
     nav — cards no longer echo their section family, they draw from this palette
     so no two cards on a screen share a hue. Tuned to a single uniform intensity
     at Glossary's level (cyan): glyph luminance band 0.498–0.737 (spread 1.48×),
     every hue ≥ 7.8:1 glyph-against-its-icon-container. These are NOT the kingdom
     colours (IBM blue / PCR pink / EOS purple) — those stay locked to curriculum
     surfaces and are not consumed here. Consumed via --card-tone; do not fork. */
  --card-hue-cyan:    #44eedd;
  --card-hue-sky:     #74c9ff;
  --card-hue-violet:  #d3aaff;
  --card-hue-magenta: #ff9dce;
  --card-hue-coral:   #ffa892;
  --card-hue-amber:   #ffc266;
  --card-hue-gold:    #ffdd5c;
  --card-hue-lime:    #84e6a0;

  /* ═══ Quick start buttons ═══ */
  --button-radius: 14px;
  --button-stroke: rgba(255, 255, 255, 0.15);
  --button-shadow: 0 8px 12px rgba(0, 0, 0, 0.60);

  /* ═══ Button accent colors (BLC kingdom-mapped) ═══ */
  /* IBM: blue */
  --accent-blue-top: #3a60bb;
  --accent-blue-bottom: #1e3070;
  /* EOS: purple */
  --accent-purple-top: #7a44aa;
  --accent-purple-bottom: #402268;
  /* PCR: pink */
  --accent-pink-top: #aa3366;
  --accent-pink-bottom: #601838;
  /* Teal (drills/practice) */
  --accent-teal-top: #2d8888;
  --accent-teal-bottom: #0e4040;
  /* Gold (AI Jesse) */
  --accent-gold-top: #d4a830;
  --accent-gold-bottom: #8a6810;

  /* ═══ Gradient cards (kingdom-specific panels) ═══ */
  --card-ibm-top: #000f35;
  --card-ibm-bottom: #001022;
  --card-pcr-top: #3f0018;
  --card-pcr-bottom: #200010;
  --card-eos-top: #2a1848;
  --card-eos-bottom: #161030;
  --card-gold-top: #3a2810;
  --card-gold-bottom: #201808;
  --card-culture-top: #002822;
  --card-culture-bottom: #001510;

  /* ═══ Teaching tip / theory card ═══ */
  --theory-top: rgba(255, 216, 102, 0.20);
  --theory-bottom: rgba(255, 216, 102, 0.08);
  --theory-radius: 14px;
  --theory-stroke: rgba(255, 216, 102, 0.25);

  /* ═══ Typography ═══ */
  --fn: 'Poppins', 'Outfit', sans-serif;
  --fd: 'Outfit', 'Poppins', sans-serif;
  --fm: 'Poppins', sans-serif;

  --text-primary: rgba(229, 225, 228, 0.95);
  --text-secondary: rgba(196, 199, 199, 1);
  --text-muted: rgba(142, 145, 146, 1);
  --text-theory-title: #ffd866;
  --text-theory-body: rgba(245, 242, 255, 0.85);
  --text-theory-label: #ffd866;

  /* ═══ Semantic colors ═══ */
  --color-success: #55dd88;
  --color-warning: #ffaa44;
  --color-danger: #ff5555;

  /* ═══ Progress bars ═══ */
  --progress-ibm: linear-gradient(90deg, #5588ff, #44eedd);
  --progress-pcr: #ff5599;
  --progress-eos: #aa66ee;

  /* ═══ App title gradient ═══ */
  --title-gradient: linear-gradient(90deg, #aa66ee 0%, #5588ff 50%, #44eedd 100%);

  /* ═══ Nav ═══ */
  --nav-bg-top: rgba(34, 28, 48, 1);
  --nav-bg-bottom: rgba(22, 18, 30, 1);
  --nav-label: rgba(106, 96, 128, 1);
  --nav-active: #ffffff;
  --nav-home: #5588ff;
  --nav-learn: #aa66ee;
  --nav-ai: #ffd866;
  --nav-practice: #44eedd;
  --nav-profile: #ff5599;

  /* Shared action-surface geometry. The nav height is replaced at runtime with
     its rendered height so fixed actions clear both role variants and iOS. */
  --blc-persistent-nav-height: calc(88px + env(safe-area-inset-bottom, 0px));
  --blc-action-bar-height: 72px;
  --blc-modal-safe-padding: max(52px, calc(18px + env(safe-area-inset-bottom, 0px)));
  --blc-modal-layer: 1200;

  /* ═══ Level colors ═══ */
  --level-1: #44eedd;
  --level-2: #5588ff;
  --level-3: #aa66ee;
  --level-4: #ffd866;

  /* ═══ Pillar tag colors ═══ */
  --pillar-timing: #5588ff;
  --pillar-grounding: #5588ff;
  --pillar-framing: #5588ff;
  --pillar-music: #ff5599;
  --pillar-connection: #ff5599;
  --pillar-momentum: #ff5599;
  --pillar-movement: #aa66ee;
  --pillar-structure: #aa66ee;
  --pillar-patterns: #aa66ee;
}

/* Keep the universal placeholder treatment rooted in the token layer. The important
   flag also neutralises generated utility placeholder colours without per-control fixes. */
:root :is(input, textarea)::placeholder {
  color: var(--text-placeholder) !important;
  opacity: 1;
}