/* =========================================================
   HAK-MZ design tokens
   The only file allowed to contain raw color values.
   ========================================================= */

:root {
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: clamp(34px, 5vw, 52px);
  --fs-code: 15px;
  --lh-body: 1.6;
  --lh-heading: 1.2;
  --measure: 70ch;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;

  /* Layout */
  --container: 1200px;
  --gutter: var(--space-5);
  --header-h: 64px;
  --header-gap: var(--space-3);
  --tap: 44px;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116;
  --surface: #161a21;
  --surface-2: #1d222b;
  --border: #2a303b;
  --border-strong: #6b7383;
  --text: #e8eaed;
  --text-muted: #a3a9b4;
  --accent: #d1343a;
  --accent-hover: #b52a30;
  --accent-fg: #ff7a7e;
  --accent-text: #ffffff;
  --accent-soft: #3a1d21;
  --focus: #6ea8fe;
  --success: #4ade80;
  --danger: #ff7a7e;
  --code-bg: #0a0c10;
  --code-text: #d7dbe2;
  --logo-plate: #f0f1f3;
  --logo-ink: #15181d;
  --logo-plate-dark: #1d222b;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 4px 16px rgb(0 0 0 / .35);

  --sev-critical-bg: #3a1d21;
  --sev-critical-fg: #ff9a9d;
  --sev-high-bg: #3a2717;
  --sev-high-fg: #ffb366;
  --sev-medium-bg: #36311a;
  --sev-medium-fg: #f2d264;
  --sev-low-bg: #1b2c3d;
  --sev-low-fg: #8cc4ff;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f0f1f3;
  --border: #e1e3e7;
  --border-strong: #7f8693;
  --text: #15181d;
  --text-muted: #5b6270;
  --accent: #d1343a;
  --accent-hover: #b52a30;
  --accent-fg: #b9262c;
  --accent-text: #ffffff;
  --accent-soft: #fbe9ea;
  --focus: #1d4ed8;
  --success: #15803d;
  --danger: #b9262c;
  --code-bg: #f0f1f3;
  --code-text: #15181d;
  --logo-plate: #f0f1f3;
  --logo-ink: #15181d;
  --logo-plate-dark: #1d222b;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .06);
  --shadow-md: 0 4px 16px rgb(0 0 0 / .08);

  --sev-critical-bg: #fbe9ea;
  --sev-critical-fg: #a3222a;
  --sev-high-bg: #fdeedd;
  --sev-high-fg: #9a4a06;
  --sev-medium-bg: #fbf4d6;
  --sev-medium-fg: #7a5a00;
  --sev-low-bg: #e6f0fc;
  --sev-low-fg: #1d4f91;
}

@media (max-width: 640px) {
  :root {
    --gutter: var(--space-4);
    --header-h: 56px;
    --header-gap: var(--space-2);
  }
}