/* ============================================================
   Brightnet Computer Academy — Global Design Tokens
   ============================================================ */
:root {
  /* Palette */
  --primary: #0f172a;        /* Deep Obsidian Slate */
  --primary-soft: #1e293b;
  --accent: #2563eb;         /* Electric Tech Blue */
  --accent-dark: #1d4ed8;
  --accent-soft: #dbeafe;
  --text-main: #334155;
  --text-muted: #64748b;
  --text-invert: #e2e8f0;
  --bg-light: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --success: #16a34a;
  --success-soft: #dcfce7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;

  /* Fixed dark-navy tokens for panels designed to always look dark
     (hero, page banners, chat header) — unlike --primary, these never
     flip in dark mode, so their hardcoded light text stays readable. */
  --ink: #0f172a;
  --ink-soft: #1e293b;

  /* Set by JS to the app-notif-bar's rendered height (0px when dismissed/absent)
     so the fixed header and hero top-padding can make room for it without
     hardcoding a height that would break if the bar's text wraps. */
  --notif-bar-h: 0px;

  /* Type */
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-hero: clamp(2.2rem, 5.5vw, 4rem);
  --fs-h2: clamp(1.6rem, 3.2vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.35rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.05rem);

  /* Layout */
  --container: 1180px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 10px 10px -5px rgba(15, 23, 42, 0.05);

  /* Motion */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: all 0.2s ease;

  /* Aliases used across style.css but never given their own value —
     kept as aliases instead of rewriting every call site. */
  --border-color: var(--border);
  --bg-main: var(--bg-light);
  --radius-md: var(--radius);
  --text-heading: var(--primary);
  --font-heading: var(--font-display);
}

body.dark-theme {
  --primary: #f8fafc;
  --primary-soft: #e2e8f0;
  --text-main: #cbd5e1;
  --text-muted: #94a3b8;
  --text-invert: #334155;
  --bg-light: #0f172a;
  --surface: #1e293b;
  --border: #334155;
}