@layer tokens {
  /* ===
     NIKOMA DOO — design tokens.
     Art direction: "precision instrument, not a brochure."
     Red is the cut — a line, an edge, a scan. Never a filled field.
     === */

  :root {
    /* brand --- */
    --red: #ff0000;          /* logo, cut lines, hot edges only */
    --red-ui: #e10600;       /* filled buttons — white bold text ≥16px only */
    --red-link: #b00000;     /* red text on light backgrounds (4.5:1 on white) */
    --red-hot: #ff2d16;      /* red text/icons on dark backgrounds */
    --red-glow: rgb(255 0 0 / 0.3);

    /* dark theme --- */
    --d-bg: #08090b;
    --d-surface: #0f1215;
    --d-raise: #151a1e;
    --d-line: #1e242a;
    --d-text: #e9ecee;
    --d-muted: #8a949d;

    /* light theme --- */
    --l-bg: #ffffff;
    --l-bg2: #f4f6f7;
    --l-ink: #0e1316;
    --l-line: #dee4e8;
    --l-muted: #5a6771;

    /* material tints --- */
    --m-alu: #c6cdd3;
    --m-cu: #b87333;
    --m-brass: #c6a664;
    --m-bronze: #8c6239;
    --m-plastic: #8a949d;

    /* status --- */
    --ok: #12805c;   /* na lageru */
    --wait: #8a6d1f; /* po porudžbini */

    /* type --- */
    --f-display: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --f-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --f-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;

    --t-mega: clamp(44px, 9vw, 132px);
    --t-h1: clamp(34px, 6vw, 76px);
    --t-h2: clamp(26px, 3.6vw, 44px);
    --t-h3: clamp(19px, 2vw, 26px);
    --t-body: 17px;
    --t-sm: 14.5px;
    --t-xs: 12px;

    /* spacing — 4px base. Use only these. --- */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;
    --s9: 96px;
    --s10: 128px;

    /* motion --- */
    --e-out: cubic-bezier(0.16, 1, 0.3, 1);
    --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --d-fast: 180ms;
    --d-base: 420ms;
    --d-slow: 760ms;
    --d-cine: 1200ms;

    /* structure --- */
    --maxw: 1280px;
    --gutter: clamp(20px, 4vw, 64px);
    --radius: 2px; /* near-zero. Machined metal, not a mobile app. */
    --header-h: 72px;
    /* Floating widget dock — assistant bottom-left, back-to-top + upit bottom-right. */
    --dock-inline: 24px;
    --dock-block: 24px;
    --dock-gap: 12px;
    --dock-size: 52px;

    --tint: var(--m-alu);
  }

  /* The desktop header is taller: the logo is 40px and the nav sits at 16px.
     Everything that clears the header — hero offsets, scroll-padding, the mega-menu
     anchor — reads this one token, so the whole layout follows. */
  @media (min-width: 1100px) {
    :root { --header-h: 80px; }
  }

  /* Contextual aliases. Every component reads these, never the raw theme tokens,
     so one class flips a whole section between dark and light.
     `.is-dark` is the same set — it exists so a dark band can sit inside a light page. */
  :root,
  .is-dark {
    --bg: var(--d-bg);
    --surface: var(--d-surface);
    --raise: var(--d-raise);
    --line: var(--d-line);
    --text: var(--d-text);
    --muted: var(--d-muted);
    --accent-text: var(--red-hot);
    --shadow: 0 24px 60px rgb(0 0 0 / 0.55);

    color-scheme: dark;
  }

  /* Light context — /materijal/** body, /lager/ body, and any .is-light block.
     Shadows are deliberately dropped: on white they read as dirt, not depth. */
  .is-light {
    --bg: var(--l-bg);
    --surface: var(--l-bg2);
    --raise: #ffffff;
    --line: var(--l-line);
    --text: var(--l-ink);
    --muted: var(--l-muted);
    --accent-text: var(--red-link);
    --shadow: none;

    color-scheme: light;
  }

  /* Per-family tint, set on <body data-material="bakar"> by the generator. */
  [data-material='aluminijum'] { --tint: var(--m-alu); }
  [data-material='bakar'] { --tint: var(--m-cu); }
  [data-material='mesing'] { --tint: var(--m-brass); }
  [data-material='bronza'] { --tint: var(--m-bronze); }
  [data-material='plastika'] { --tint: var(--m-plastic); }
}