/* ============================================================================
   ANIPULSE — base.css
   Design tokens, themes, reset, typography, utilities
   ========================================================================== */

/* ------------------------------- TOKENS ---------------------------------- */
:root {
  /* Accent (overridden by data-accent) */
  --accent: #f47521;
  --accent-2: #ff9a4d;
  --accent-soft: rgba(244, 117, 33, .16);
  --accent-contrast: #0a0a0a;

  /* Surfaces */
  --bg: #07070a;
  --bg-2: #0b0b10;
  --bg-3: #111118;
  --surface: #14141c;
  --surface-2: #1b1b25;
  --surface-3: #24242f;
  --surface-4: #33333f;

  /* Text */
  --text: #ffffff;
  --text-2: #a9a9b8;
  --text-3: #6f6f80;

  /* Lines & shadows */
  --border: rgba(255, 255, 255, .08);
  --border-2: rgba(255, 255, 255, .16);
  --shadow: 0 18px 50px rgba(0, 0, 0, .6);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .45);
  --glow: 0 0 26px rgba(244, 117, 33, .38);
  --glow-intensity: .38;

  /* Radii */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-sm: 8px;
  --card-radius: 14px;

  /* Metrics */
  --header-h: 66px;
  --bottom-h: 62px;
  --maxw: 1640px;
  --rail-gap: 16px;
  --card-w: 186px;
  --density: 1;
  --motion: 1;
  --blur: 16px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Inter', var(--font);
  --fs: 16px;

  color-scheme: dark;
}

/* Accent presets */
html[data-accent="orange"] { --accent: #f47521; --accent-2: #ff9a4d; --accent-soft: rgba(244,117,33,.16); --glow: 0 0 26px rgba(244,117,33,var(--glow-intensity)); }
html[data-accent="sunset"] { --accent: #ff6a00; --accent-2: #ff8c42; --accent-soft: rgba(255,106,0,.16); --glow: 0 0 26px rgba(255,106,0,var(--glow-intensity)); }
html[data-accent="purple"] { --accent: #8b5cf6; --accent-2: #a78bfa; --accent-soft: rgba(139,92,246,.18); --glow: 0 0 26px rgba(139,92,246,var(--glow-intensity)); }
html[data-accent="blue"]   { --accent: #3b82f6; --accent-2: #60a5fa; --accent-soft: rgba(59,130,246,.18); --glow: 0 0 26px rgba(59,130,246,var(--glow-intensity)); }
html[data-accent="green"]  { --accent: #22c55e; --accent-2: #4ade80; --accent-soft: rgba(34,197,94,.18); --glow: 0 0 26px rgba(34,197,94,var(--glow-intensity)); }
html[data-accent="red"]    { --accent: #ef4444; --accent-2: #f87171; --accent-soft: rgba(239,68,68,.18); --glow: 0 0 26px rgba(239,68,68,var(--glow-intensity)); }
html[data-accent="pink"]   { --accent: #ec4899; --accent-2: #f472b6; --accent-soft: rgba(236,72,153,.18); --glow: 0 0 26px rgba(236,72,153,var(--glow-intensity)); }
html[data-accent="cyan"]   { --accent: #06b6d4; --accent-2: #22d3ee; --accent-soft: rgba(6,182,212,.18); --glow: 0 0 26px rgba(6,182,212,var(--glow-intensity)); }

/* Themes */
html[data-theme="amoled"] {
  --bg: #000; --bg-2: #000; --bg-3: #040406;
  --surface: #0a0a0e; --surface-2: #101018; --surface-3: #17171f; --surface-4: #222230;
  --border: rgba(255,255,255,.10);
  color-scheme: dark;
}
html[data-theme="midnight"] {
  --bg: #0a0e1a; --bg-2: #0e1424; --bg-3: #131b30;
  --surface: #161f38; --surface-2: #1d2846; --surface-3: #273456; --surface-4: #364568;
  --border: rgba(140,170,255,.12);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f6f7fb; --bg-2: #ffffff; --bg-3: #eef0f6;
  --surface: #ffffff; --surface-2: #f2f4f9; --surface-3: #e7eaf2; --surface-4: #d9dee9;
  --text: #12131a; --text-2: #565b6b; --text-3: #8a90a2;
  --border: rgba(10,12,20,.10); --border-2: rgba(10,12,20,.18);
  --shadow: 0 18px 50px rgba(20,30,60,.16); --shadow-sm: 0 6px 20px rgba(20,30,60,.12);
  --accent-contrast: #ffffff;
  color-scheme: light;
}

/* Density */
html[data-density="compact"] { --density: .85; --rail-gap: 12px; }
html[data-density="cozy"]    { --density: 1; }
html[data-density="comfy"]   { --density: 1.18; --rail-gap: 20px; }

/* Motion off */
html[data-motion="off"] { --motion: 0; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* ------------------------------- RESET ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--accent-contrast); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ------------------------------ UTILITIES -------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(14px, 3vw, 40px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.no-scroll { overflow: hidden !important; }
.gradient-text {
  background: linear-gradient(120deg, var(--accent), var(--accent-2) 60%, #fff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.glass {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
}
.skeleton {
  position: relative; overflow: hidden;
  background: var(--surface-2); border-radius: var(--radius);
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-4) 70%, transparent), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
.divider { height: 1px; background: var(--border); border: 0; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }