/* ══════════════════════════════════════════════
   01-tokens.css
   Design Tokens, CSS Reset & Base Typography
   PPLG Interactive Learning Module
   ══════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  /* Brand Colors */
  --accent:         #00d4a1;
  --accent-dim:     #00a07a;
  --accent-glow:    rgba(0, 212, 161, 0.15);
  --accent2:        #7c6fff;
  --accent2-glow:   rgba(124, 111, 255, 0.15);
  --amber:          #f5a623;
  --red:            #ff4d6d;
  --green:          #22c55e;

  /* Backgrounds */
  --bg-base:        #0d0f14;
  --bg-card:        #141720;
  --bg-card-hover:  #1a1e2b;
  --bg-sidebar:     #10131a;

  /* Text */
  --text-primary:   #e8eaf0;
  --text-secondary: #8892a4;
  --text-muted:     #4a5162;

  /* Borders */
  --border:         rgba(255,255,255,0.07);
  --border-accent:  rgba(0, 212, 161, 0.3);

  /* Typography */
  --font-main:      'Space Grotesk', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Layout */
  --sidebar-w:      260px;

  /* Border Radius */
  --radius-xs:      4px;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --radius-xl:      24px;

  /* Transitions */
  --transition:     0.2s ease;
  --transition-slow:0.4s ease;

  /* Shadows */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.4);
  --shadow-glow:    0 0 20px var(--accent-glow);
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background: var(--bg-base);
  color: var(--text-primary);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── BASE TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}

p { line-height: 1.65; }

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

button {
  font-family: var(--font-main);
  cursor: pointer;
}

input, textarea, select {
  font-family: var(--font-main);
  color: var(--text-primary);
}

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

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── UTILITY CLASSES ── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-accent   { color: var(--accent); }
.text-accent2  { color: var(--accent2); }
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.font-mono     { font-family: var(--font-mono); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

/* ── GLOBAL KEYFRAMES ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%       { box-shadow: 0 0 0 8px rgba(0,212,161,0); }
}

@keyframes pulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(255,77,109,0); }
}

@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}

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

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}