/**
 * Konstent design tokens — the single source of truth for color, spacing,
 * typography, radii, shadows, transitions, and z-index across the site.
 *
 * Brand palette: black, white, and #3182ce (the one accent blue) — no
 * secondary hues. Dark (black surfaces / white text) is the default; the
 * light variant simply inverts to white surfaces / black text, with the
 * same #3182ce accent in both.
 */

:root {
  /* --- Color: brand surfaces (dark, default) --- */
  --color-bg: #0a0a0a;
  --color-bg-elevated: #141414;
  --color-bg-surface: #1a1a1a;
  --color-bg-surface-hover: #232323;
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.28);

  /* --- Color: text --- */
  --color-text: #ffffff;
  --color-text-muted: #b3b3b3;
  --color-text-faint: #808080;
  --color-text-on-accent: #ffffff;

  /* --- Color: accent — a single brand blue, used in tints/shades only --- */
  --color-accent-blue: #3182ce;
  --color-accent-cyan: #4299e1;
  /* alias kept for existing component CSS; same blue family, lighter tint */
  --color-accent-violet: #2c5282;
  /* alias kept for existing component CSS; same blue family, deep shade */
  --color-accent-blue-strong: #63b3ed;
  --color-gradient-brand: linear-gradient(135deg, #2c5282 0%, #3182ce 55%, #63b3ed 100%);

  /* --- Color: state --- */
  --color-success: #2f9e6e;
  --color-warning: #c69214;
  --color-danger: #e0525c;
  --color-success-bg: rgba(47, 158, 110, 0.14);
  --color-warning-bg: rgba(198, 146, 20, 0.14);
  --color-danger-bg: rgba(224, 82, 92, 0.14);

  /* --- Typography --- */
  --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --fs-lg: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
  --fs-xl: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem);
  --fs-3xl: clamp(2.75rem, 2.2rem + 2.5vw, 4.25rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing scale --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --container-max: 76rem;
  --container-narrow: 46rem;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(49, 130, 206, 0.45);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;

  /* --- Z-index scale --- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-skip-link: 500;
}

/* Opt-in light theme: honored via prefers-color-scheme and the footer toggle.
   Same three brand colors, inverted: white surfaces, black text, same blue. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --color-bg: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-surface: #f7f7f7;
    --color-bg-surface-hover: #eeeeee;
    --color-border: rgba(0, 0, 0, 0.12);
    --color-border-strong: rgba(0, 0, 0, 0.24);
    --color-text: #0a0a0a;
    --color-text-muted: #4d4d4d;
    --color-text-faint: #717171;
    --color-text-on-accent: #ffffff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.14);
  }
}

:root[data-theme='light'] {
  --color-bg: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-surface: #f7f7f7;
  --color-bg-surface-hover: #eeeeee;
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.24);
  --color-text: #0a0a0a;
  --color-text-muted: #4d4d4d;
  --color-text-faint: #717171;
  --color-text-on-accent: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.14);
}