/**
 * 3sixty design tokens.
 * Single source of truth for color, type, spacing, radius, shadow,
 * motion and z-index values. Components must reference these
 * custom properties instead of hardcoding raw values.
 */

:root {
  /* ---- Color: brand core (dartboard-derived) ---- */
  --color-red-900: #3a0c10;
  --color-red-700: #7a1620;
  --color-red-600: #a91c26;
  --color-red-500: #c81e2c;
  --color-red-400: #e8303f;
  --color-red-glow: #ff4d55;

  --color-green-900: #0a2b1e;
  --color-green-700: #12472f;
  --color-green-600: #17593a;
  --color-green-500: #1c8a5a;
  --color-green-400: #2cb579;

  --color-wire-200: #f2ead3;
  --color-wire-300: #e4d9b8;

  /* ---- Color: neutrals (near-black base, warm off-white) ---- */
  --color-neutral-950: #0b0d0c;
  --color-neutral-900: #141715;
  --color-neutral-800: #1b1f1c;
  --color-neutral-700: #262b27;
  --color-neutral-600: #3a413c;
  --color-neutral-500: #5b635c;
  --color-neutral-400: #838a83;
  --color-neutral-300: #9a9f9a;
  --color-neutral-200: #c7cbc6;
  --color-neutral-100: #e6e5df;
  --color-neutral-50: #f2f0ea;

  /* ---- Color: semantic ---- */
  --color-bg: var(--color-neutral-950);
  --color-bg-raised: var(--color-neutral-900);
  --color-surface: var(--color-neutral-800);
  --color-surface-border: var(--color-neutral-700);

  --color-fg: var(--color-neutral-50);
  --color-fg-muted: var(--color-neutral-300);
  --color-fg-subtle: var(--color-neutral-400);

  --color-primary: var(--color-red-500);
  --color-primary-strong: var(--color-red-400);
  --color-primary-fg: var(--color-neutral-50);

  --color-secondary: var(--color-green-600);
  --color-secondary-strong: var(--color-green-500);
  --color-secondary-fg: var(--color-neutral-50);

  --color-accent: var(--color-wire-200);
  --color-accent-fg: var(--color-neutral-950);

  --color-border: var(--color-neutral-700);
  --color-muted: var(--color-neutral-800);
  --color-muted-fg: var(--color-neutral-300);

  --color-destructive: var(--color-red-500);
  --color-destructive-fg: var(--color-neutral-50);
  --color-success: var(--color-green-500);
  --color-success-fg: var(--color-neutral-50);
  --color-warning: #d99a2b;
  --color-warning-fg: var(--color-neutral-950);

  --color-focus-ring: var(--color-wire-200);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;
  --text-6xl: 4.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---- Spacing 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;
  --space-32: 8rem;

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;

  /* ---- Shadow / elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-glow-red: 0 0 48px rgba(232, 48, 63, 0.35);
  --shadow-glow-green: 0 0 48px rgba(28, 138, 90, 0.3);

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---- Motion ---- */
  --duration-fast: 120ms;
  --duration-normal: 240ms;
  --duration-slow: 480ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Breakpoints (reference only; media queries use raw px) ---- */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ---- Layout ---- */
  --content-max-width: 1200px;
  --header-height: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}