website/src/styles/base/primitives.css

@layer tokens {
  .ui {
    /* == Font sizes == */
    --type--3: 0.625rem; /* 10px */
    --type--2: 0.6875rem; /* 11px */
    --type--1: 0.75rem; /* 12px */
    --type-0: 0.875rem; /* 14px — base */
    --type-1: 1rem; /* 16px */
    --type-2: 1.125rem; /* 18px */
    --type-3: 1.25rem; /* 20px */
    --type-4: 1.375rem; /* 22px */
    --type-5: 1.5625rem; /* 25px */
    --type-6: 1.75rem; /* 28px */
    --type-7: 1.9375rem; /* 31px */
    --type-8: 2.1875rem; /* 35px */
    --type-9: 2.5rem; /* 40px */
    --type-10: 2.75rem; /* 44px */
    --type-slab: clamp(4rem, 9vw, 7.5rem);

    /* == Line heights == */
    --leading--3: 1.6;
    --leading--2: 1.4545;
    --leading--1: 1.6667;
    --leading-0: 1.4286;
    --leading-1: 1.5;
    --leading-2: 1.3333;
    --leading-3: 1.4;
    --leading-4: 1.2727;
    --leading-5: 1.28;
    --leading-6: 1.2857;
    --leading-7: 1.1613;
    --leading-8: 1.1429;
    --leading-9: 1.2;
    --leading-10: 1.1818;

    /* == Letter spacing == */
    --tracking--3: 0.012em;
    --tracking--2: 0.0082em;
    --tracking--1: 0.005em;
    --tracking-0: 0em;
    --tracking-1: -0.0037em;
    --tracking-2: -0.0067em;
    --tracking-3: -0.009em;
    --tracking-4: -0.0109em;
    --tracking-5: -0.0132em;
    --tracking-6: -0.015em;
    --tracking-7: -0.0165em;
    --tracking-8: -0.018em;
    --tracking-9: -0.0195em;
    --tracking-10: -0.0205em;

    /* == Prose leading == */
    --leading-prose: 1.7;
    --leading-prose-tight: 1.6;

    /* == Chrome tracking == */
    --tracking-label: 0.14em; /* step labels, buttons */
    --tracking-tag: 0.12em; /* tags */
    --tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
    --tracking-plate: 0.08em; /* plate numbers */
    --tracking-display: 0.01em; /* Blaka h1 */
    --tracking-subtitle: 0.0875em; /* standfirst under a title */
  }

  .content {
    /* == Font sizes == */
    --type--3: 0.625em;
    --type--2: 0.6875em;
    --type--1: 0.8125em;
    --type-0: 1em; /* 16px — base */
    --type-1: 1.1875em;
    --type-2: 1.4375em;
    --type-3: 1.6875em;
    --type-4: 2em;
    --type-5: 2.375em;
    --type-6: 2.8125em;
    --type-7: 3.375em;
    --type-8: 4em;
    --type-9: 4.75em;
    --type-10: 5.6875em;

    /* == Line heights == */
    --leading--3: 2;
    --leading--2: 1.8182;
    --leading--1: 1.5385;
    --leading-0: 1.5;
    --leading-1: 1.4737;
    --leading-2: 1.3912;
    --leading-3: 1.3333;
    --leading-4: 1.25;
    --leading-5: 1.2632;
    --leading-6: 1.1556;
    --leading-7: 1.1852;
    --leading-8: 1.125;
    --leading-9: 1.1053;
    --leading-10: 1.0989;

    /* == Letter spacing == */
    --tracking--3: 0.018em;
    --tracking--2: 0.0136em;
    --tracking--1: 0.0069em;
    --tracking-0: 0em;
    --tracking-1: -0.0047em;
    --tracking-2: -0.0091em;
    --tracking-3: -0.0122em;
    --tracking-4: -0.015em;
    --tracking-5: -0.0174em;
    --tracking-6: -0.0193em;
    --tracking-7: -0.0211em;
    --tracking-8: -0.0225em;
    --tracking-9: -0.0237em;
    --tracking-10: -0.0247em;
  }

  :root {
    /* === FONT FAMILIES == */
    --font-display: var(--font-blaka), serif;
    --font-header: var(--font-geist), sans-serif;
    --font-body: var(--font-julia-mono), monospace;
    --font-mono: var(--font-geist-mono), monospace;
    --font-symbols: var(--font-unigrim), monospace;
    --font-weight-display: 400;
    --font-weight-body: 400;
    --font-weight-emphasis: 700;
    --font-weight-label: 600;
    --font-weight-heading: 900;

    /* === SIZE === */
    --size-0: 0;
    --size-px: 0.0625rem; /* 1px */
    --size-1: 0.125rem; /* 2px */
    --size-2: 0.25rem; /* 4px */
    --size-3: 0.375rem; /* 6px */
    --size-4: 0.5rem; /* 8px */
    --size-5: 0.625rem; /* 10px */
    --size-6: 0.75rem; /* 12px */
    --size-7: 0.875rem; /* 14px */
    --size-8: 1rem; /* 16px */
    --size-9: 1.25rem; /* 20px */
    --size-10: 1.5rem; /* 24px */
    --size-11: 2rem;
    --size-12: 2.5rem;
    --size-13: 3rem;
    --size-14: 4rem;
    --size-15: 5rem;
    --size-16: 6rem;

    /* === SPACING === */
    --space-0: 0;
    --space-px: 0.0625em;
    --space-1: 0.125em;
    --space-2: 0.25em;
    --space-3: 0.375em;
    --space-4: 0.5em;
    --space-5: 0.625em;
    --space-6: 0.75em;
    --space-7: 0.875em;
    --space-8: 1em;
    --space-9: 1.25em;
    --space-10: 1.5em;
    --space-11: 2em;
    --space-12: 2.5em;
    --space-13: 3em;
    --space-14: 4em;
    --space-15: 5em;
    --space-16: 6em;

    /* === BORDER === */
    --border-hairline: var(--size-px); /* 1px — inside a card */
    --border-card: var(--size-1); /* 2px — the card edge */
    --border-shell: var(--size-3); /* 6px?? no: see below */
    --border-boundary: 0.1875rem; /* 3px — section / shell boundary */
    --border-marker: var(--size-1); /* 2px — the tier row active marker */
    --radius: 0; /* always. */

    /* === FIXED SLOTS === */
    --slot-sigil: var(--size-7); /* 14px — Unigrim Dee. RESERVED, empty. */
    --slot-plate: 2.25rem; /* plate number column */
    --slot-modifier: 1.125rem; /* the +2 / −1 column in contributions */
    --slot-marker: var(--size-5); /* footnote marker column */
    --slot-roll-range: 1.5rem; /* the 4–5 column in a table row */
    --slot-section-number: 5ch;
    --slot-prose-marker: 1.625rem;
    --slot-prose-gap: var(--size-6);
    --slot-prose-bar: var(--size-8);

    /* ═══ MOTION ═══ */
    --motion-fast: 150ms; /* state change: hover, focus, press */
    --motion-normal: 300ms; /* reveals: chooser open, tier switch */
    --motion-slow: 500ms;
    --motion-instant: 0ms; /* roll results. Use this deliberately. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* ═══ LAYOUT ═══ */
    --layout-wrapper-width: 74rem;
    --layout-rail-width: 12.5rem;
    --layout-content-width: minmax(0, 62ch);
    --layout-margin-width: 18rem;
    --layout-gutter: var(--size-12);
    --layout-page-margin: var(--size-10);
    --layout-header-height: 3.125rem;
  }
}