:root {
  color-scheme: dark;

  --font-sans: "Outfit", "Space Grotesk", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "AurulentSansMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --color-bg: #121212;
  --color-surface: #1c1c1c;
  --color-surface-strong: #242424;
  --color-surface-hover: #202020;
  --color-text: #e6e6e6;
  --color-text-muted: #a8a8a8;
  --color-border: rgba(204, 204, 204, 0.14);
  --color-accent: #55bb8c;
  --color-accent-ink: #0a0a0a;
  --color-link-underline: rgba(85, 187, 140, 0.55);
  --color-danger-accent: #c32f27;
  --color-light: #dad3c7;
  --color-input-bg: #1c1c1c;
  --color-card-grad-start: #1c1c1c;
  --color-card-grad-end: #1c1c1c;
  --color-header-bg: rgba(12, 12, 12, 0.85);
  --color-grid-line: rgba(85, 187, 140, 0.045);
  --color-accent-soft: rgba(85, 187, 140, 0.5);
  --color-accent-hover: #66c697;
  --color-accent-bg-weak: rgba(85, 187, 140, 0.07);
  --color-surface-bg: #1c1c1c;
  --color-body-bg: linear-gradient(180deg, #111111 0%, #121212 100%);

  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.28);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --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;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-hero: clamp(2.6rem, 7vw, 6rem);

  --content-max: 1200px;
  --header-height: 68px;
  --transition-fast: 160ms ease;
  --transition-med: 260ms ease;
}

html[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f5f5f2;
  --color-surface: #ecebe7;
  --color-surface-strong: #e2e0da;
  --color-surface-hover: #e8e5df;
  --color-text: #1f1f1f;
  --color-text-muted: #4e4e4e;
  --color-border: rgba(36, 36, 36, 0.18);
  --color-accent: #c32f27;
  --color-accent-ink: #ffffff;
  --color-link-underline: rgba(195, 47, 39, 0.5);
  --color-danger-accent: #b1322d;
  --color-light: #161616;
  --color-input-bg: #ffffff;
  --color-card-grad-start: #faf9f6;
  --color-card-grad-end: #ffffff;
  --color-header-bg: rgba(255, 255, 255, 0.86);
  --color-grid-line: rgba(31, 31, 31, 0.05);
  --color-accent-soft: rgba(195, 47, 39, 0.45);
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, #ffffff);
  --color-accent-bg-weak: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-surface-bg: #ecebe7;
  --color-body-bg: radial-gradient(circle at 80% -10%, rgba(195, 47, 39, 0.08), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #f5f5f2 100%);

  --shadow-md: 0 10px 22px rgba(30, 30, 30, 0.08);
  --shadow-lg: 0 16px 36px rgba(30, 30, 30, 0.12);
}