/* Hioii design tokens — v1.0
 * Dark-first. Violet primary, cyan accent, colored glows instead of black shadows.
 */
:root {
  /* Radii */
  --radius: 0.75rem;         /* 12px base */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-full: 9999px;

  /* Spacing (4px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Color */
  --background: hsl(240 7% 2%);
  --foreground: hsl(0 0% 100%);
  --card: hsl(240 7% 7.5%);
  --muted: hsl(240 5% 16%);
  --muted-foreground: hsl(240 4% 66%);
  --primary: hsl(271 81% 53%);
  --primary-foreground: hsl(0 0% 100%);
  --accent: hsl(183 100% 50%);
  --accent-foreground: hsl(240 7% 2%);
  --destructive: hsl(0 72% 55%);
  --border: hsl(240 5% 16%);
  --ring: hsl(271 81% 53%);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(271 81% 53%) 0%, hsl(183 100% 50%) 100%);
  --gradient-surface: linear-gradient(160deg, hsl(240 7% 9%) 0%, hsl(240 7% 4%) 100%);

  /* Glows, not shadows */
  --glow-primary: 0 0 40px -8px hsl(271 81% 53% / 0.55);
  --glow-cyan: 0 0 40px -8px hsl(183 100% 50% / 0.45);
  --glow-soft: 0 18px 60px -30px hsl(271 81% 53% / 0.7);

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "SF Pro Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.4s;
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
}