@layer tokens {
  :root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: ui-serif, Georgia, "Times New Roman", serif;

    --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
    --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
    --step-1:  clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
    --step-2:  clamp(1.8rem, 1.4rem + 1.9vw, 3rem);

    --space-2xs: 0.375rem;
    --space-xs:  0.625rem;
    --space-s:   1rem;
    --space-m:   1.75rem;
    --space-l:   3rem;
    --space-xl:  5rem;

    --radius: 14px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --speed: 280ms;

    --measure: 46ch;
  }

  :root,
  [data-theme="light"] {
    --color-bg: #ebe9e6;
    --color-surface: #f7f6f4;
    --color-ink: #16161a;
    --color-muted: #6a6a72;
    --color-line: #d2cfca;
    --color-accent: #c0431d;

    --logo-fill: #16161a;
    --logo-cut: var(--color-bg);
    --logo-glow: none;
    --eye-opacity: 0;
    --figure-dim: 0.28;
    --card-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
  }

  [data-theme="dark"] {
    --color-bg: #0d0d10;
    --color-surface: #16161b;
    --color-ink: #f2efea;
    --color-muted: #8d8d98;
    --color-line: #2a2a33;
    --color-accent: #ff6b3d;

    --logo-fill: #1b1b22;
    --logo-cut: var(--color-bg);
    --logo-glow: drop-shadow(0 0 22px rgba(255, 107, 61, 0.18));
    --eye-opacity: 1;
    --figure-dim: 0.42;
    --card-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.9);
  }
}