/* ============================================================
   global.css — design tokens, reset, base typography, role contract
   Shared layer — enqueue on EVERY page (WordPress: wp_enqueue_style global).
   ============================================================ */
:root {
  --bg: #fbfaf7;
  --bg-elev: #ffffff;
  --bg-sunk: #f3f1ec;
  --ink: #1a1a1a;
  --ink-2: #4a4a4a;
  --ink-3: #8a8780;
  --ink-4: #c4c1b8;
  --line: rgba(20,18,12,0.08);
  --line-2: rgba(20,18,12,0.04);
  --accent: #4f5eed;
  --accent-2: #6b7afa;
  --accent-soft: rgba(79,94,237,0.10);
  --accent-ink: #2b3aa8;
  --ok: #1f8a5a;
  --ok-2: #2faa72;
  --ok-soft: rgba(31,138,90,0.10);
  --warn: #c97a2b;
  --t-video: #4f5eed;
  --t-video-soft: rgba(79,94,237,0.10);
  --t-reading: #b8862b;
  --t-reading-soft: rgba(184,134,43,0.10);
  --t-quiz: #1f7a8a;
  --t-quiz-soft: rgba(31,122,138,0.10);
  --t-code: #8a5af0;
  --t-code-soft: rgba(138,90,240,0.10);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(20,18,12,0.04), 0 8px 20px rgba(20,18,12,0.05);
  --shadow-card-lg: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 3px rgba(20,18,12,0.04), 0 20px 50px rgba(20,18,12,0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --font-display: 'Heebo', system-ui, sans-serif;
  --font-body: 'Heebo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --gold: #d6a017;
  --font-serif: 'Frank Ruhl Libre', Georgia, serif;
  --track: #8a5af0;
  --track-soft: rgba(138,90,240,0.12);
  --warm: #c75a3a;
  --bg-tint: #f2efe7;
  --warn-soft: rgba(181,106,37,0.12);
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(20,18,12,0.04);
  --font: 'Heebo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --err: #c4543a;
  --err-soft: rgba(196,84,58,0.10);
  color-scheme: light;
}

/* ---- Dark theme — token overrides (set via dev switcher: <html data-theme="dark">).
   Everything is painted through these CSS variables, so re-defining them flips the
   whole UI. Warm-neutral dark to match the warm light palette. ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14151a;
  --bg-elev: #1c1e25;
  --bg-sunk: #0f1014;
  --bg-tint: #191b21;
  --ink: #f1efea;
  --ink-2: #c4c2bc;
  --ink-3: #8d8b85;
  --ink-4: #5a5853;
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.05);
  --accent: #6f7dfb;
  --accent-2: #8a96ff;
  --accent-soft: rgba(111,125,251,0.16);
  --accent-ink: #aab4ff;
  --ok: #34b07a;
  --ok-2: #49c78d;
  --ok-soft: rgba(52,176,122,0.16);
  --warn: #e0954a;
  --warn-soft: rgba(224,149,74,0.16);
  --t-video: #6f7dfb;
  --t-video-soft: rgba(111,125,251,0.16);
  --t-reading: #d8a84e;
  --t-reading-soft: rgba(216,168,78,0.16);
  --t-quiz: #3fa9bb;
  --t-quiz-soft: rgba(63,169,187,0.16);
  --t-code: #a784ff;
  --t-code-soft: rgba(167,132,255,0.16);
  --track: #a784ff;
  --track-soft: rgba(167,132,255,0.18);
  --gold: #e0b43a;
  --warm: #e58360;
  --err: #e3735d;
  --err-soft: rgba(227,115,93,0.14);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 8px 20px rgba(0,0,0,0.38);
  --shadow-card-lg: 0 1px 3px rgba(0,0,0,0.30), 0 20px 50px rgba(0,0,0,0.50);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
}

/* ---- Accent palettes (dev switcher: <html data-palette="X">). Only the accent
   family changes (semantic ok/warn/topic colours stay). indigo = the :root default.
   Accents match the dev-switcher swatches; dark variants are brightened. ---- */
html[data-palette="soft"]    { --accent:#8a8ff0; --accent-2:#a0a4f5; --accent-soft:rgba(138,143,240,0.10); --accent-ink:#4a4fb0; }
html[data-palette="emerald"] { --accent:#1f8a5a; --accent-2:#2baa72; --accent-soft:rgba(31,138,90,0.10);  --accent-ink:#15623f; }
html[data-palette="violet"]  { --accent:#8a5af0; --accent-2:#9d74f5; --accent-soft:rgba(138,90,240,0.10); --accent-ink:#5a3aa8; }
html[data-palette="rose"]    { --accent:#e0436e; --accent-2:#ea6386; --accent-soft:rgba(224,67,110,0.10); --accent-ink:#a02049; }
html[data-palette="amber"]   { --accent:#d6951a; --accent-2:#e8a92f; --accent-soft:rgba(214,149,26,0.10); --accent-ink:#8f6010; }

html[data-theme="dark"][data-palette="soft"]    { --accent:#9fa4f7; --accent-2:#b4b8fa; --accent-soft:rgba(159,164,247,0.16); --accent-ink:#c2c5fb; }
html[data-theme="dark"][data-palette="emerald"] { --accent:#34b07a; --accent-2:#49c78d; --accent-soft:rgba(52,176,122,0.16);  --accent-ink:#8fe3c0; }
html[data-theme="dark"][data-palette="violet"]  { --accent:#a784ff; --accent-2:#ba9dff; --accent-soft:rgba(167,132,255,0.16); --accent-ink:#cdb8ff; }
html[data-theme="dark"][data-palette="rose"]    { --accent:#ee6e92; --accent-2:#f48ca8; --accent-soft:rgba(238,110,146,0.16); --accent-ink:#f7b8c8; }
html[data-theme="dark"][data-palette="amber"]   { --accent:#e6ab3e; --accent-2:#f2bf5a; --accent-soft:rgba(230,171,62,0.16);  --accent-ink:#f0d28e; }

/* ---- Role visibility contract (data-viewer on <html>, data-roles on blocks) ---- */
html[data-viewer="guest"]   [data-roles]:not([data-roles~="guest"])   { display: none !important; }
html[data-viewer="free"]    [data-roles]:not([data-roles~="free"])    { display: none !important; }
html[data-viewer="student"] [data-roles]:not([data-roles~="student"]) { display: none !important; }
.cc-role-view { display: block; }

@keyframes crsPulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 12%, transparent); }
  }

@keyframes wsInstIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

@keyframes wsInstInRtl {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

@keyframes wsFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes wsSpin { to { transform: rotate(360deg); } }

@keyframes wsSlideIn {
    from { transform: translateX(-100%); opacity: 0.5; }
    to { transform: translateX(0); opacity: 1; }
  }

@keyframes wsSlideInRtl {
    from { transform: translateX(100%); opacity: 0.5; }
    to { transform: translateX(0); opacity: 1; }
  }

@keyframes hmPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 30%, transparent); }
    50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--ok) 0%, transparent); }
  }

@keyframes blink { 50% { opacity: 0; } }

@keyframes pfToastIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--bg);
    background-image:
      radial-gradient(1200px 600px at 100% -10%, rgba(79,94,237,0.06), transparent 60%),
      radial-gradient(1000px 500px at -10% 110%, rgba(184,134,43,0.05), transparent 60%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

a { color: var(--accent); text-decoration: none; }

a:hover { text-decoration: underline; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

button { font-family: inherit; }

body {
    background: var(--bg);
    background-image:
      radial-gradient(1200px 600px at 100% -10%, rgba(79,94,237,0.06), transparent 60%),
      radial-gradient(1000px 500px at -10% 110%, rgba(138,90,240,0.05), transparent 60%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body); font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; min-height: 100vh;
  }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

img { max-width: 100%; display: block; }

body { margin: 0; font-family: var(--font); background: #ece8df; }

body {
    background: var(--bg);
    background-image:
      radial-gradient(1200px 600px at 100% -10%, rgba(79,94,237,0.05), transparent 60%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

body {
    background: var(--bg);
    background-image:
      radial-gradient(1200px 600px at 100% -10%, rgba(138,90,240,0.07), transparent 60%),
      radial-gradient(1000px 500px at -10% 110%, rgba(31,138,90,0.05), transparent 60%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; min-height: 100vh;
  }

/* ---- Founder photo ------------------------------------------------------
   A real portrait dropped into an avatar box (.av / .init) or the large
   .mk-portrait frame. .cc-face fills its parent and inherits its rounding;
   inside .mk-portrait it covers the whole framed panel (below the .tag). */
.cc-face { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: inherit; }
.mk-portrait .cc-face { position: absolute; inset: 0; z-index: 1; border-radius: 0; object-position: center 22%; }