/* ==========================================================================
   chrismish.com — design tokens (single source of truth)
   Direction: Industrial/Technical, dark-first, elegant.
   Accent: signal oxide (hazard orange-red) — NOT AI blue/purple.
   All raw values live HERE only. Components reference semantic tokens.
   ========================================================================== */

:root {
  /* ----- Layer 1: primitives (used only to build Layer 2 below) ----- */
  /* steel neutrals (slightly cool, slightly desaturated) */
  --steel-950: oklch(0.16 0.008 260);
  --steel-900: oklch(0.19 0.008 260);
  --steel-850: oklch(0.22 0.009 260);
  --steel-800: oklch(0.25 0.010 260);
  --steel-700: oklch(0.34 0.010 260);
  --steel-400: oklch(0.62 0.010 260);
  --steel-300: oklch(0.72 0.008 260);
  --steel-150: oklch(0.88 0.005 260);
  --steel-100: oklch(0.93 0.004 260);
  --steel-50:  oklch(0.97 0.003 260);
  /* signal oxide accent */
  --oxide-600: oklch(0.58 0.19 38);
  --oxide-500: oklch(0.64 0.20 38);
  --oxide-400: oklch(0.70 0.18 40);

  /* ----- Type scale (fluid) ----- */
  --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(3rem, 0.5rem + 7vw, 8rem);

  /* ----- Fonts (final selection in typography-system.md) ----- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* ----- Spacing (4px base) ----- */
  --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;

  /* ----- Radius (industrial = restrained) ----- */
  --radius-sm: 0.125rem;  /* 2px — hard-edged direction */
  --radius-md: 0.25rem;   /* 4px */
  --radius-lg: 0.375rem;  /* 6px */
  --radius-xl: 0.5rem;    /* 8px */
  --radius-full: 9999px;

  /* ----- Layout ----- */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================== DARK (default — dark-first site) ===================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces */
  --color-bg: var(--steel-950);
  --color-surface: var(--steel-900);
  --color-surface-2: var(--steel-850);
  --color-surface-offset: var(--steel-800);
  --color-border: oklch(0.93 0.004 260 / 0.14);
  --color-border-strong: oklch(0.93 0.004 260 / 0.28);
  /* text */
  --color-text: oklch(0.91 0.004 260);
  --color-text-muted: oklch(0.70 0.008 260);
  --color-text-faint: oklch(0.64 0.008 260); /* AA: 5.6:1 on bg */
  --color-text-inverse: var(--steel-950);
  /* action */
  --color-primary: var(--oxide-500);
  --color-primary-hover: var(--oxide-400);
  --color-primary-active: var(--oxide-600);
  /* semantic */
  --color-success: oklch(0.72 0.17 150);
  --color-warning: oklch(0.78 0.15 85);
  --color-error: oklch(0.64 0.21 25);
  /* elevation */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
  /* logo: white signature on dark */
  --logo-filter: none;
}

/* ===================== LIGHT ===================== */
[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--steel-50);
  --color-surface: oklch(0.99 0.002 260);
  --color-surface-2: var(--steel-100);
  --color-surface-offset: var(--steel-150);
  --color-border: oklch(0.19 0.008 260 / 0.14);
  --color-border-strong: oklch(0.19 0.008 260 / 0.30);
  --color-text: oklch(0.23 0.010 260);
  --color-text-muted: oklch(0.45 0.010 260);
  --color-text-faint: oklch(0.50 0.008 260); /* AA: 5.4:1 on bg */
  --color-text-inverse: var(--steel-50);
  --color-primary: oklch(0.53 0.17 38); /* AA on light bg: 5.25:1 */
  --color-primary-hover: oklch(0.58 0.17 38);
  --color-primary-active: oklch(0.47 0.16 38);
  --color-success: oklch(0.55 0.15 150);
  --color-warning: oklch(0.60 0.14 85);
  --color-error: oklch(0.55 0.20 25);
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 260 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 260 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 260 / 0.12);
  --logo-filter: invert(1);
}

/* System preference fallback when no explicit choice */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --color-bg: var(--steel-50);
    --color-surface: oklch(0.99 0.002 260);
    --color-surface-2: var(--steel-100);
    --color-surface-offset: var(--steel-150);
    --color-border: oklch(0.19 0.008 260 / 0.14);
    --color-border-strong: oklch(0.19 0.008 260 / 0.30);
    --color-text: oklch(0.23 0.010 260);
    --color-text-muted: oklch(0.45 0.010 260);
    --color-text-faint: oklch(0.50 0.008 260); /* AA: 5.4:1 on bg */
    --color-text-inverse: var(--steel-50);
    --color-primary: oklch(0.53 0.17 38); /* AA on light bg: 5.25:1 */
    --color-primary-hover: oklch(0.58 0.17 38);
    --color-primary-active: oklch(0.47 0.16 38);
    --color-success: oklch(0.55 0.15 150);
    --color-warning: oklch(0.60 0.14 85);
    --color-error: oklch(0.55 0.20 25);
    --shadow-sm: 0 1px 2px oklch(0.2 0.01 260 / 0.06);
    --shadow-md: 0 4px 12px oklch(0.2 0.01 260 / 0.08);
    --shadow-lg: 0 12px 32px oklch(0.2 0.01 260 / 0.12);
    --logo-filter: invert(1);
  }
}