@layer tokens {
  :root {
    /* Color */
    --color-ink: #0b0b0b;
    --color-ground: #ffffff;
    --color-panel: #fafaf8;
    --color-hairline: #e6e6e3;
    --color-muted: #5e5e5a;      /* 6.6:1 on white, 6.3:1 on panel */
    --color-accent: #cdeb4b;
    --color-on-accent: var(--color-ink);
    --color-on-ink: #ffffff;
    --color-ink-raised: #2a2a28; /* outlines and hover on dark surfaces */
    --color-danger: #b42318;     /* 6.0:1 on white */
    --color-positive: #1a7f37;   /* 5.1:1 on white */
    --color-focus: var(--color-ink);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Type */
    --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-xs: 0.8125rem;  /* 13px: labels, table headings */
    --text-sm: 0.875rem;   /* 14px */
    --text-md: 0.9375rem;  /* 15px: body */
    --text-lg: 1.0625rem;  /* 17px: section titles */
    --text-xl: 2rem;       /* 32px: big numbers */
    --text-2xl: 2.125rem;  /* 34px: page titles */

    /* Space (4px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Sizing */
    --touch-target: 44px;
    --sidebar-width: 220px;
    --content-max: 1180px;
  }
}