/* QRFunk design tokens — from Claude Design handoff v1.0 */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --qf-primary-50: #eef3ff;
  --qf-primary-100: #dbe4ff;
  --qf-primary-200: #bccdff;
  --qf-primary-300: #90a9ff;
  --qf-primary-400: #5e7dff;
  --qf-primary-500: #1f57ff;
  --qf-primary-600: #0b3fe6;
  --qf-primary-700: #0c33b4;
  --qf-primary-800: #102b8a;
  --qf-primary-900: #11245f;

  --qf-accent-50: #e6fbf4;
  --qf-accent-100: #c2f4e4;
  --qf-accent-200: #88e8cd;
  --qf-accent-300: #48d8b1;
  --qf-accent-400: #15bd91;
  --qf-accent-500: #00a37b;
  --qf-accent-600: #008264;
  --qf-accent-700: #0a6650;
  --qf-accent-800: #0d5040;
  --qf-accent-900: #0d3f33;

  --qf-neutral-0: #ffffff;
  --qf-neutral-25: #fbfcfe;
  --qf-neutral-50: #f5f7fb;
  --qf-neutral-100: #eef1f7;
  --qf-neutral-200: #e1e6f0;
  --qf-neutral-300: #cdd4e2;
  --qf-neutral-400: #a3acc0;
  --qf-neutral-500: #737d94;
  --qf-neutral-600: #525b70;
  --qf-neutral-700: #3a4255;
  --qf-neutral-800: #252c3c;
  --qf-neutral-900: #161c29;
  --qf-neutral-950: #0d111c;

  --qf-bg: #f5f7fb;
  --qf-surface: #ffffff;
  --qf-surface-2: #fbfcfe;
  --qf-surface-sunken: #eef1f7;
  --qf-elevated: #ffffff;
  --qf-overlay: rgba(13, 17, 28, 0.45);
  --qf-surface-translucent: rgba(255, 255, 255, 0.78);

  --qf-fg: #161c29;
  --qf-fg-muted: #525b70;
  --qf-fg-subtle: #737d94;
  --qf-fg-faint: #a3acc0;

  --qf-border: #e1e6f0;
  --qf-border-strong: #cdd4e2;

  --qf-primary: #1f57ff;
  --qf-primary-hover: #0b3fe6;
  --qf-primary-active: #0c33b4;
  --qf-on-primary: #ffffff;
  --qf-primary-soft: #eef3ff;
  --qf-primary-soft-fg: #0c33b4;

  --qf-accent: #00a37b;
  --qf-accent-hover: #008264;
  --qf-on-accent: #ffffff;
  --qf-accent-soft: #e6fbf4;
  --qf-accent-soft-fg: #0a6650;

  --qf-ring: rgba(31, 87, 255, 0.45);
  --qf-ring-accent: rgba(0, 163, 123, 0.42);

  --qf-success: #0fa06a;
  --qf-success-soft: #e7f7f0;
  --qf-success-fg: #0a6644;

  --qf-warning: #f59e0b;
  --qf-warning-soft: #fff6e6;
  --qf-warning-fg: #a86407;

  --qf-danger: #e5484d;
  --qf-danger-soft: #fdecec;
  --qf-danger-fg: #a51f29;

  --qf-font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  --qf-font-body: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --qf-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --qf-text-xs: 12px;
  --qf-text-sm: 14px;
  --qf-text-base: 16px;
  --qf-text-md: 18px;
  --qf-text-lg: 20px;
  --qf-text-xl: 24px;
  --qf-text-2xl: 30px;
  --qf-text-3xl: 36px;
  --qf-text-4xl: 48px;

  --qf-space-1: 4px;
  --qf-space-2: 8px;
  --qf-space-3: 12px;
  --qf-space-4: 16px;
  --qf-space-5: 20px;
  --qf-space-6: 24px;
  --qf-space-8: 32px;
  --qf-space-10: 40px;
  --qf-space-12: 48px;
  --qf-space-16: 64px;

  --qf-radius-xs: 4px;
  --qf-radius-sm: 6px;
  --qf-radius-md: 10px;
  --qf-radius-lg: 14px;
  --qf-radius-xl: 20px;
  --qf-radius-2xl: 28px;
  --qf-radius-pill: 999px;

  --qf-shadow-xs: 0 1px 2px rgba(13, 17, 28, 0.06);
  --qf-shadow-sm: 0 1px 3px rgba(13, 17, 28, 0.09), 0 1px 2px rgba(13, 17, 28, 0.06);
  --qf-shadow-md: 0 6px 16px rgba(13, 17, 28, 0.09), 0 2px 5px rgba(13, 17, 28, 0.06);
  --qf-shadow-lg: 0 16px 36px rgba(13, 17, 28, 0.13), 0 5px 12px rgba(13, 17, 28, 0.07);
  --qf-shadow-xl: 0 28px 64px rgba(13, 17, 28, 0.18), 0 10px 24px rgba(13, 17, 28, 0.1);
  --qf-shadow-glow: 0 6px 20px rgba(31, 87, 255, 0.35);

  --qf-dur-instant: 80ms;
  --qf-dur-fast: 140ms;
  --qf-dur-base: 200ms;
  --qf-dur-slow: 320ms;
  --qf-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --qf-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --qf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
  --qf-bg: #0d111c;
  --qf-surface: #141a27;
  --qf-surface-2: #1a2030;
  --qf-surface-sunken: #0a0e17;
  --qf-elevated: #1c2335;
  --qf-overlay: rgba(5, 7, 12, 0.6);
  --qf-surface-translucent: rgba(20, 26, 39, 0.8);

  --qf-fg: #eef1f7;
  --qf-fg-muted: #a3acc0;
  --qf-fg-subtle: #737d94;
  --qf-fg-faint: #525b70;

  --qf-border: #262e40;
  --qf-border-strong: #39445c;

  --qf-primary: #3b6bff;
  --qf-primary-hover: #5e7dff;
  --qf-primary-active: #7a93ff;
  --qf-on-primary: #ffffff;
  --qf-primary-soft: #16213f;
  --qf-primary-soft-fg: #9db4ff;

  --qf-accent: #15bd91;
  --qf-accent-hover: #48d8b1;
  --qf-on-accent: #04231b;
  --qf-accent-soft: #0c2b25;
  --qf-accent-soft-fg: #5fe3bf;

  --qf-ring: rgba(94, 125, 255, 0.5);
  --qf-ring-accent: rgba(21, 189, 145, 0.45);

  --qf-success: #1fb87e;
  --qf-success-soft: #0c2b22;
  --qf-success-fg: #5fe3b3;

  --qf-warning: #f5b53b;
  --qf-warning-soft: #2e2410;
  --qf-warning-fg: #f7cd7a;

  --qf-danger: #f0676b;
  --qf-danger-soft: #2e1517;
  --qf-danger-fg: #f6a0a3;

  --qf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --qf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --qf-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.4);
  --qf-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55), 0 5px 12px rgba(0, 0, 0, 0.4);
  --qf-shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.6), 0 10px 24px rgba(0, 0, 0, 0.4);
  --qf-shadow-glow: 0 6px 24px rgba(59, 107, 255, 0.5);
}

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

@keyframes qf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes qf-toastin {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--qf-primary);
  color: #fff;
}