/* odooTube design tokens — see design/REDESIGN.md §3.
   Source of truth for colors, type, spacing, radii, shadows, motion. */

:root {
  /* surfaces */
  --bg-0:  oklch(14% 0.012 268);
  --bg-1:  oklch(17% 0.012 268);
  --bg-2:  oklch(20% 0.012 268);
  --bg-3:  oklch(23% 0.014 268);
  --bg-4:  oklch(27% 0.016 268);

  /* borders */
  --border:        oklch(28% 0.014 268);
  --border-strong: oklch(36% 0.016 268);
  --border-accent: oklch(63% 0.22 282 / 0.4);

  /* text */
  --fg:        oklch(96% 0.005 268);
  --fg-muted:  oklch(72% 0.015 268);
  --fg-subtle: oklch(54% 0.012 268);
  --fg-faint:  oklch(40% 0.010 268);

  /* brand */
  --primary:        oklch(63% 0.22 282);
  --primary-hover:  oklch(70% 0.20 282);
  --primary-soft:   oklch(63% 0.22 282 / 0.16);
  --primary-faint:  oklch(63% 0.22 282 / 0.08);

  --secondary:      oklch(72% 0.18 230);
  --secondary-soft: oklch(72% 0.18 230 / 0.18);

  /* semantic */
  --success:       oklch(72% 0.18 158);
  --success-soft:  oklch(72% 0.18 158 / 0.18);
  --warning:       oklch(80% 0.16  85);
  --warning-soft:  oklch(80% 0.16  85 / 0.18);
  --danger:        oklch(67% 0.22  18);
  --danger-soft:   oklch(67% 0.22  18 / 0.18);
  --info:          oklch(72% 0.12 230);
  --info-soft:     oklch(72% 0.12 230 / 0.18);

  /* shadows */
  --shadow-1: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 1px 2px oklch(0% 0 0 / 0.5);
  --shadow-2: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 6px 24px oklch(0% 0 0 / 0.4);
  --shadow-3: 0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 16px 60px oklch(0% 0 0 / 0.55);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;

  /* layout */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 56px;
  --container-max: 1440px;
}

/* base reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: var(--bg-0);
  color: var(--fg);
  font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

code, kbd, pre, samp, .mono {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, "SF Mono", monospace;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary-hover); }

::selection { background: var(--primary-soft); color: var(--fg); }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* focus ring */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* status dot animation */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.dot-pulse { animation: pulse-dot 1.6s var(--ease-out) infinite; }

/* sparkline bar animation */
@keyframes spark { 0% { transform: scaleY(0.1); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
.spark-bar { transform-origin: bottom; animation: spark 320ms var(--ease-out) backwards; }

/* shimmer skeleton */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}

/* utility: card surface */
.surface-1 { background: var(--bg-1); }
.surface-2 { background: var(--bg-2); box-shadow: var(--shadow-1); }
.surface-3 { background: var(--bg-3); }

/* utility: hairline */
.hairline { border-color: var(--border); }
.hairline-strong { border-color: var(--border-strong); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}