/* ============================================================
   WEAR138 — Design Tokens
   Punk/horror palette: jet black, blood red, stark white
   ============================================================ */

:root,
[data-theme="dark"] {
  /* --- Brand Colors --- */
  --color-red: #CC0000;
  --color-red-hover: #E60000;
  --color-red-active: #AA0000;
  --color-red-dim: rgba(204, 0, 0, 0.15);
  --color-red-border: rgba(204, 0, 0, 0.4);

  /* --- Surfaces (Dark Primary) --- */
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-2: #161616;
  --color-surface-offset: #1a1a1a;
  --color-surface-card: #141414;
  --color-divider: #222222;
  --color-border: #2a2a2a;
  --color-border-subtle: #1f1f1f;

  /* --- Text --- */
  --color-text: #f0f0f0;
  --color-text-muted: #888888;
  --color-text-faint: #555555;
  --color-text-inverse: #0a0a0a;

  /* --- Interactive --- */
  --color-primary: #CC0000;
  --color-primary-hover: #E60000;
  --color-primary-active: #AA0000;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.8);
  --shadow-red: 0 0 20px rgba(204, 0, 0, 0.3);
  --shadow-red-sm: 0 0 8px rgba(204, 0, 0, 0.2);
}

/* Light Mode — secondary, muted version */
[data-theme="light"] {
  --color-red: #CC0000;
  --color-red-hover: #B00000;
  --color-red-active: #900000;
  --color-red-dim: rgba(204, 0, 0, 0.08);
  --color-red-border: rgba(204, 0, 0, 0.3);

  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-surface-2: #fafafa;
  --color-surface-offset: #efefef;
  --color-surface-card: #ffffff;
  --color-divider: #e0e0e0;
  --color-border: #cccccc;
  --color-border-subtle: #e8e8e8;

  --color-text: #111111;
  --color-text-muted: #555555;
  --color-text-faint: #999999;
  --color-text-inverse: #f0f0f0;

  --color-primary: #CC0000;
  --color-primary-hover: #B00000;
  --color-primary-active: #900000;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-red: 0 0 20px rgba(204, 0, 0, 0.15);
  --shadow-red-sm: 0 0 8px rgba(204, 0, 0, 0.1);
}

/* System pref fallback */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-surface-2: #fafafa;
    --color-surface-offset: #efefef;
    --color-surface-card: #ffffff;
    --color-divider: #e0e0e0;
    --color-border: #cccccc;
    --color-border-subtle: #e8e8e8;
    --color-text: #111111;
    --color-text-muted: #555555;
    --color-text-faint: #999999;
    --color-text-inverse: #f0f0f0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.18);
  }
}

:root {
  /* --- Type Scale --- */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(5rem, 2rem + 12vw, 16rem);

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Border Radius --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  /* --- Transitions --- */
  --transition-interactive: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Content Widths --- */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* --- Fonts --- */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Work Sans', 'Helvetica Neue', sans-serif;

  /* --- Nav height --- */
  --nav-height: 68px;
}