/* Nizhenets design kit — tokens (Nöbet 3, 2026-10-25)
   Light: Marmara limestone (grey-green off-white). Dark: night harbour (mid-dark teal slate).
   Black: neutral near-black for OLED / low light; the teal accent stays.
   One accent (teal) for interaction, one lamp (amber) for "live / attention". White and green use no pure black/white.
   Theme resolution: data-theme="light|dark|black" on <html> wins; otherwise the system preference (dark = green).
   Visible names: light = White, dark = Green (stored value stays "dark" for compatibility), black = Black.

   Nöbet 3 adds, without renaming anything that exists:
   - an elevation scale: canvas (the room) < surface (plates, tables) < overlay (menus, dialogs, toasts);
     --nz-raised stays the "well" colour used for hover and inset plates; --nz-field is the input fill.
     Surfaces carry a hairline top highlight (--nz-hairline) instead of a shadow; only floating layers cast
     shadows (--nz-elev-2 menus/toasts, --nz-elev-3 dialogs). --nz-shadow-float = --nz-elev-3.
   - a radius hierarchy: xs 4 (code, kbd) < sm 6 < control 8 < plate 14 < overlay 18 < pill.
   - a display step for page headlines (--nz-text-display, Plex Serif) and --nz-text-4xl.
   The canvas colours are unchanged so theme.js (meta theme-color) and the header swatches still match. */
:root {
  color-scheme: light;

  --nz-canvas: #eef0eb;
  --nz-surface: #f9faf7;
  --nz-raised: #e5e9e3;
  --nz-overlay: #fcfdfb;
  --nz-field: #fcfdfb;
  --nz-line: #d3d9d2;
  --nz-line-strong: #7e8a81;

  --nz-ink: #1b2524;
  --nz-ink-2: #4d5c57;
  --nz-ink-3: #56625d;

  --nz-accent: #1f6a62;
  --nz-accent-ink: #f9fcfb;
  --nz-accent-soft: #d6e8e3;
  --nz-accent-hover: #17554f;
  --nz-accent-press: #124541;

  --nz-lamp: #85570b;
  --nz-lamp-glow: #e2a548;
  --nz-lamp-soft: #f5e7cb;

  --nz-ok: #23643b;      --nz-ok-soft: #d9eadd;
  --nz-warn: #7b4f0a;    --nz-warn-soft: #f4e5c8;
  --nz-bad: #a5363f;     --nz-bad-soft: #f4dadc;
  --nz-info: #2b5a98;    --nz-info-soft: #d9e4f3;

  --nz-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --nz-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --nz-font-mono: "IBM Plex Mono", Consolas, "Cascadia Mono", "SF Mono", monospace;

  /* Type scale: 13 / 14 / 15 / 17 / 21 / 26 / 33 stays (apps size against it); 4xl and display are new. */
  --nz-text-xs: 13px;
  --nz-text-sm: 14px;
  --nz-text-md: 15px;
  --nz-text-lg: 17px;
  --nz-text-xl: 21px;
  --nz-text-2xl: 26px;
  --nz-text-3xl: 33px;
  --nz-text-4xl: 42px;
  --nz-text-display: clamp(32px, 1.4vw + 24px, 46px);
  --nz-leading: 1.5;
  --nz-leading-tight: 1.25;
  --nz-leading-display: 1.08;
  --nz-tracking-display: -0.022em;
  --nz-tracking-tight: -0.012em;

  --nz-space-1: 4px;
  --nz-space-2: 8px;
  --nz-space-3: 12px;
  --nz-space-4: 16px;
  --nz-space-5: 20px;
  --nz-space-6: 24px;
  --nz-space-8: 32px;
  --nz-space-10: 40px;
  --nz-space-12: 48px;
  --nz-space-16: 64px;

  --nz-radius-xs: 4px;
  --nz-radius-sm: 6px;
  --nz-radius-control: 8px;
  --nz-radius-plate: 14px;
  --nz-radius-overlay: 18px;
  --nz-radius-pill: 999px;

  --nz-focus: 0 0 0 2px var(--nz-canvas), 0 0 0 4px var(--nz-accent);

  /* Elevation. Hairlines are inset highlights on the top edge; shadows only on floating layers. */
  --nz-hairline: inset 0 1px 0 rgb(255 255 255 / 0.75);
  --nz-hairline-strong: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --nz-elev-2: 0 0 0 1px rgb(24 40 36 / 0.06), 0 2px 4px rgb(24 40 36 / 0.05), 0 14px 32px -10px rgb(24 40 36 / 0.22);
  --nz-elev-3: 0 0 0 1px rgb(24 40 36 / 0.06), 0 4px 10px rgb(24 40 36 / 0.06), 0 28px 64px -18px rgb(24 40 36 / 0.32);
  --nz-shadow-float: var(--nz-elev-3);
  --nz-scrim: rgb(28 38 36 / 0.32);
  --nz-lamp-halo: 0 0 0 3px color-mix(in srgb, var(--nz-lamp-glow) 26%, transparent);
  --nz-row-hover: color-mix(in srgb, var(--nz-accent) 5%, var(--nz-surface));

  --nz-measure: 72ch;
  --nz-content: 1240px;
  --nz-gutter: clamp(16px, 3vw, 32px);
  --nz-masthead-h: 56px;
  --nz-rail-w: 232px;
  --nz-table-max-h: none;

  --nz-ease: cubic-bezier(0.2, 0, 0, 1);
  --nz-fast: 120ms;
  --nz-medium: 180ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --nz-canvas: #1c2729;
  --nz-surface: #233133;
  --nz-raised: #2b3a3c;
  --nz-overlay: #2c3c3e;
  --nz-field: #182224;
  --nz-line: #35484b;
  --nz-line-strong: #6f878a;
  --nz-ink: #e4ebe8;
  --nz-ink-2: #a7b7b4;
  --nz-ink-3: #9eaeaa;
  --nz-accent: #66bbb1;
  --nz-accent-ink: #0c1e1c;
  --nz-accent-soft: #1f3d3b;
  --nz-accent-hover: #80cbc2;
  --nz-accent-press: #4ea79c;
  --nz-lamp: #eab35c;
  --nz-lamp-glow: #eab35c;
  --nz-lamp-soft: #3b3122;
  --nz-ok: #74c695;      --nz-ok-soft: #1f3a2c;
  --nz-warn: #eab35c;    --nz-warn-soft: #3b3122;
  --nz-bad: #ee8b94;     --nz-bad-soft: #45282c;
  --nz-info: #8ab8ee;    --nz-info-soft: #22364b;
  --nz-hairline: inset 0 1px 0 rgb(214 240 232 / 0.06);
  --nz-hairline-strong: inset 0 1px 0 rgb(214 240 232 / 0.1);
  --nz-elev-2: 0 0 0 1px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.2), 0 16px 36px -10px rgb(0 0 0 / 0.5);
  --nz-elev-3: 0 0 0 1px rgb(0 0 0 / 0.2), 0 6px 14px rgb(0 0 0 / 0.22), 0 32px 72px -18px rgb(0 0 0 / 0.62);
  --nz-scrim: rgb(10 16 17 / 0.55);
  --nz-lamp-halo: 0 0 0 3px color-mix(in srgb, var(--nz-lamp-glow) 20%, transparent), 0 0 12px 1px color-mix(in srgb, var(--nz-lamp-glow) 45%, transparent);
  --nz-row-hover: color-mix(in srgb, var(--nz-accent) 7%, var(--nz-surface));
}

:root[data-theme="black"] {
  color-scheme: dark;
  --nz-canvas: #0a0a0a;
  --nz-surface: #131313;
  --nz-raised: #1c1c1c;
  --nz-overlay: #1d1d1d;
  --nz-field: #0e0e0e;
  --nz-line: #2b2b2b;
  --nz-line-strong: #6e6e6e;
  --nz-ink: #ededed;
  --nz-ink-2: #b5b5b5;
  --nz-ink-3: #999999;
  --nz-accent: #5ec2b5;
  --nz-accent-ink: #04110f;
  --nz-accent-soft: #0f2b28;
  --nz-accent-hover: #80d4c9;
  --nz-accent-press: #48ab9f;
  --nz-lamp: #e8b260;
  --nz-lamp-glow: #e8b260;
  --nz-lamp-soft: #2c2111;
  --nz-ok: #6fcf97;      --nz-ok-soft: #0f2b1c;
  --nz-warn: #e8b260;    --nz-warn-soft: #2c2111;
  --nz-bad: #f28d95;     --nz-bad-soft: #351518;
  --nz-info: #8fbef3;    --nz-info-soft: #11233c;
  --nz-hairline: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --nz-hairline-strong: inset 0 1px 0 rgb(255 255 255 / 0.09);
  --nz-elev-2: 0 0 0 1px rgb(255 255 255 / 0.04), 0 2px 6px rgb(0 0 0 / 0.5), 0 16px 36px -10px rgb(0 0 0 / 0.8);
  --nz-elev-3: 0 0 0 1px rgb(255 255 255 / 0.05), 0 6px 14px rgb(0 0 0 / 0.55), 0 32px 72px -18px rgb(0 0 0 / 0.9);
  --nz-scrim: rgb(0 0 0 / 0.62);
  --nz-lamp-halo: 0 0 0 3px color-mix(in srgb, var(--nz-lamp-glow) 18%, transparent), 0 0 14px 1px color-mix(in srgb, var(--nz-lamp-glow) 50%, transparent);
  --nz-row-hover: color-mix(in srgb, var(--nz-accent) 7%, var(--nz-surface));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="black"]) {
    color-scheme: dark;
    --nz-canvas: #1c2729;
    --nz-surface: #233133;
    --nz-raised: #2b3a3c;
    --nz-overlay: #2c3c3e;
    --nz-field: #182224;
    --nz-line: #35484b;
    --nz-line-strong: #6f878a;
    --nz-ink: #e4ebe8;
    --nz-ink-2: #a7b7b4;
    --nz-ink-3: #9eaeaa;
    --nz-accent: #66bbb1;
    --nz-accent-ink: #0c1e1c;
    --nz-accent-soft: #1f3d3b;
    --nz-accent-hover: #80cbc2;
    --nz-accent-press: #4ea79c;
    --nz-lamp: #eab35c;
    --nz-lamp-glow: #eab35c;
    --nz-lamp-soft: #3b3122;
    --nz-ok: #74c695;      --nz-ok-soft: #1f3a2c;
    --nz-warn: #eab35c;    --nz-warn-soft: #3b3122;
    --nz-bad: #ee8b94;     --nz-bad-soft: #45282c;
    --nz-info: #8ab8ee;    --nz-info-soft: #22364b;
    --nz-hairline: inset 0 1px 0 rgb(214 240 232 / 0.06);
    --nz-hairline-strong: inset 0 1px 0 rgb(214 240 232 / 0.1);
    --nz-elev-2: 0 0 0 1px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.2), 0 16px 36px -10px rgb(0 0 0 / 0.5);
    --nz-elev-3: 0 0 0 1px rgb(0 0 0 / 0.2), 0 6px 14px rgb(0 0 0 / 0.22), 0 32px 72px -18px rgb(0 0 0 / 0.62);
    --nz-scrim: rgb(10 16 17 / 0.55);
    --nz-lamp-halo: 0 0 0 3px color-mix(in srgb, var(--nz-lamp-glow) 20%, transparent), 0 0 12px 1px color-mix(in srgb, var(--nz-lamp-glow) 45%, transparent);
    --nz-row-hover: color-mix(in srgb, var(--nz-accent) 7%, var(--nz-surface));
  }
}
