/* WS1 — design tokens
   Direction: "ink on label stock". Cool press-sheet greys, true bar-black,
   one signal colour borrowed from a scanner's laser line. */

:root {
  color-scheme: light dark;

  /* palette */
  --ink: #14161a;
  --ink-soft: #4c535c;
  --ink-faint: #79818c;
  --stock: #e9ecf1;
  --panel: #ffffff;
  --line: #d3d9e0;
  --line-strong: #b6bec8;
  --laser: #e1251b;
  --verified: #0f6f60;

  /* type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.7vw, 3.2rem);

  /* spacing */
  --sp-1: 0.35rem;
  --sp-2: 0.7rem;
  --sp-3: 1.1rem;
  --sp-4: 1.7rem;
  --sp-5: 2.6rem;
  --sp-6: 4rem;

  --radius: 10px;
  --radius-sm: 6px;
  --shell: 1180px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 2px rgb(20 22 26 / 0.06), 0 12px 28px -18px rgb(20 22 26 / 0.35);
  --focus: 3px solid var(--laser);
  --speed: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f1f3f6;
    --ink-soft: #b4bcc6;
    --ink-faint: #838d99;
    --stock: #0d0f12;
    --panel: #171a1f;
    --line: #2b3038;
    --line-strong: #3d444e;
    --laser: #ff5348;
    --verified: #3fbfa8;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 14px 30px -20px rgb(0 0 0 / 0.9);
  }
}

/* Manual override wins over the OS preference. */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #14161a; --ink-soft: #4c535c; --ink-faint: #79818c;
  --stock: #e9ecf1; --panel: #ffffff; --line: #d3d9e0; --line-strong: #b6bec8;
  --laser: #e1251b; --verified: #0f6f60;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f3f6; --ink-soft: #b4bcc6; --ink-faint: #838d99;
  --stock: #0d0f12; --panel: #171a1f; --line: #2b3038; --line-strong: #3d444e;
  --laser: #ff5348; --verified: #3fbfa8;
}