/* VIPEX Motion — shared design tokens. Dark default; [data-theme="light"] flips. */
:root {
  --bg: #0a0a0b;
  --bg-2: #121214;
  --fg: #f2f2ef;
  --muted: #8a8a86;
  --line: #26262a;
  --accent: #c8ff2e;
  --accent-fg: #0a0a0b;

  --panel-bg: rgba(18, 18, 20, 0.82);
  --panel-line: rgba(255, 255, 255, 0.08);

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.2vw, 1.06rem);
  --step-1: clamp(1.17rem, 1.1rem + 0.35vw, 1.38rem);
  --step-2: clamp(1.47rem, 1.35rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.83rem, 1.62rem + 1.05vw, 2.44rem);
  --step-4: clamp(2.29rem, 1.94rem + 1.75vw, 3.32rem);
  --step-5: clamp(2.86rem, 2.3rem + 2.8vw, 4.5rem);
  --step-6: clamp(3.58rem, 2.66rem + 4.6vw, 6.25rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem;
  --space-4: 1.5rem;  --space-5: 2.5rem; --space-6: 4rem; --space-7: 6.5rem;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);       /* expo-ish out */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 0.25s; --dur-med: 0.6s; --dur-slow: 1.1s;
}

[data-theme="light"] {
  --bg: #f4f3ef;
  --bg-2: #e9e8e2;
  --fg: #131312;
  --muted: #6d6d68;
  --line: #d8d7d0;
  --panel-bg: rgba(244, 243, 239, 0.88);
  --panel-line: rgba(0, 0, 0, 0.08);
}

/* Minimal demo reset. :where() keeps specificity at 0,0,0 so plain element
   selectors in a demo (header, section, footer) still win. */
:where(.fx-demo, .fx-demo *) { margin: 0; padding: 0; box-sizing: border-box; }
.fx-demo {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: var(--step-0);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  .fx-reduced-hide { display: none !important; }
}