/* ============================================================
   ULTRALEARNING ENGINE v1.5 — Design Tokens
   Gebaseerd op Vault Design System (bunq-inspired)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,300..900;1,300..900&family=Sofia+Sans+Condensed:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Vault Brand Tokens ── */
:root {
  --free-deep:        #00232E;
  --free-deep-2:      #003647;
  --free-accent:      #00BFFF;
  --free-accent-soft: #B6ECFF;
  --free-cream:       #E8F6FB;

  --core-deep:        #002E27;
  --core-deep-2:      #00463B;
  --core-accent:      #00FFD5;
  --core-accent-soft: #9CFFEB;
  --core-cream:       #E5FBF5;

  --pro-deep:         #00172E;
  --pro-deep-2:       #002452;
  --pro-accent:       #0080FF;
  --pro-accent-soft:  #B3D6FF;
  --pro-cream:        #E8F1FB;

  --elite-deep:       #2E001F;
  --elite-deep-2:     #4A0033;
  --elite-accent:     #FF00AA;
  --elite-accent-soft:#FFB3E0;
  --elite-cream:      #FBE8F4;

  --ink-1000: #0A0F12;
  --ink-900:  #11181C;
  --ink-800:  #1A2228;
  --ink-700:  #2A353C;
  --ink-500:  #5C6B73;
  --ink-300:  #A4B0B6;
  --ink-200:  #C9D1D5;
  --ink-100:  #E4E8EA;
  --ink-50:   #F2F4F5;
  --paper:    #FFFFFF;
  --cream:    #F5F1EA;
  --cream-2:  #ECE4D6;

  --font-display: "Sofia Sans Condensed", "Sofia Sans", system-ui, sans-serif;
  --font-sans:    "Sofia Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --text-xs:  12px; --text-sm:  14px; --text-base: 16px;
  --text-md:  18px; --text-lg:  21px; --text-xl:   26px;
  --text-2xl: 34px; --text-3xl: 46px; --text-4xl:  64px;

  --leading-tight:  0.92;
  --leading-snug:   1.05;
  --leading-normal: 1.35;
  --leading-loose:  1.6;

  --tracking-tight:  -0.035em;
  --tracking-snug:   -0.015em;
  --tracking-normal:  0;
  --tracking-caps:    0.08em;

  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  20px; --s-6:  24px; --s-8:  32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;  --s-24: 96px;

  --r-xs:  6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --r-xl:  32px; --r-2xl: 48px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.08);

  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 480ms;
}

/* ── Semantic tokens: DARK (default) ── */
:root,
[data-theme="dark"] {
  --bg-page:       #0A0F12;
  --bg-surface:    #11181C;
  --bg-elevated:   #1A2228;
  --bg-card:       #1A2228;
  --bg-input:      rgba(255,255,255,0.05);
  --text-primary:  #E4E8EA;
  --text-secondary:#A4B0B6;
  --text-muted:    #5C6B73;
  --border:        rgba(255,255,255,0.08);
  --border-solid:  rgba(255,255,255,0.12);
  --accent:        #00BFFF;
  --accent-muted:  rgba(0,191,255,0.12);
  --accent-hover:  rgba(0,191,255,0.20);
  --accent-glow:   0 0 40px rgba(0,191,255,0.30);
  --danger:        #FF4455;
  --danger-muted:  rgba(255,68,85,0.12);
  --success:       #00FFD5;
  --success-muted: rgba(0,255,213,0.12);
  --nav-bg:        rgba(10,15,18,0.92);
  --input-border:  rgba(255,255,255,0.12);
  --scrollbar:     rgba(255,255,255,0.08);
}

/* ── Semantic tokens: LIGHT ── */
[data-theme="light"] {
  --bg-page:       #F0F2F4;
  --bg-surface:    #FFFFFF;
  --bg-elevated:   #F5F7F9;
  --bg-card:       #FFFFFF;
  --bg-input:      #FFFFFF;
  --text-primary:  #0A0F12;
  --text-secondary:#2A353C;
  --text-muted:    #5C6B73;
  --border:        rgba(0,0,0,0.07);
  --border-solid:  rgba(0,0,0,0.12);
  --accent:        #0080FF;
  --accent-muted:  rgba(0,128,255,0.10);
  --accent-hover:  rgba(0,128,255,0.16);
  --accent-glow:   0 0 40px rgba(0,128,255,0.20);
  --danger:        #D92B3A;
  --danger-muted:  rgba(217,43,58,0.10);
  --success:       #00A878;
  --success-muted: rgba(0,168,120,0.10);
  --nav-bg:        rgba(255,255,255,0.92);
  --input-border:  rgba(0,0,0,0.14);
  --scrollbar:     rgba(0,0,0,0.08);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
input, select, textarea {
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-input);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--r-pill); }

/* ── Typography helpers ── */
.display-hero {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(48px, 8vw, 88px);
  line-height: 0.90; letter-spacing: -0.04em;
}
.display-lg {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 0.95; letter-spacing: -0.03em;
}
.display-md {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 3.5vw, var(--text-3xl));
  line-height: 1; letter-spacing: -0.025em;
}
.lede {
  font-size: var(--text-lg); line-height: var(--leading-normal);
  color: var(--text-muted);
}
.eyebrow {
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--accent);
}
.text-sm    { font-size: var(--text-sm); }
.text-xs    { font-size: var(--text-xs); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.flex-1 { flex: 1; }
.hidden { display: none !important; }