/* ============================================================ SH3PHERD · Design tokens — SCALES (radius, type, space…) ------------------------------------------------------------ Sizing + elevation scales. Single-tier: a radius or a font size IS its value, so there is no primitive/semantic split — just the scale, on :root. Elevation is the one exception that touches colour, but stays theme-invariant (black-ink shadows via the black primitive, legible on every theme). RADIUS and ELEVATION are the two scales a theme may re-declare. The line is not "one scale is special", it is: a theme may change what a surface LOOKS like, never where it SITS. Corner softness is a brand axis; depth is calibrated against a ground, and a shadow tuned for near-black ink is a grey smear on a light page. Neither moves a box by one pixel. Font, type, space and motion stay theme-invariant — those re-flow or re-time a page. The contract test enforces exactly that split. ============================================================ */ :root { /* Radius scale. NB: `lg` is a real large radius and `pill` is the capsule — two separate tokens. (The app historically overloaded a single `--radius-lg` as the pill, which left no token for a card's ~14px corner. Fixed here.) */ --fold-radius-xs: 3px; --fold-radius-sm: 6px; --fold-radius-md: 10px; --fold-radius-lg: 14px; --fold-radius-pill: 9999px; --fold-radius-round: 50%; /* Font families. Deliberately only two: `sans` is the base face, `mono` the tabular/code face. There is no `display` face — nothing in the library renders one, and a token nothing consumes is a claim nothing backs. Theme-invariant, like every other measurement here: swapping a face re-flows a page, and only radius may vary by theme (the contract test enforces it). A host app overrides these on its own `:root` if it ships a brand face — that is a host decision, not a theme axis. Components still declare `font-family: inherit` rather than naming the token: a fold component adopts whatever face its host sets, and the token is what a host names when it wants ours. */ --fold-font-sans: system-ui, -apple-system, sans-serif; --fold-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* The MICRO-LABEL face — the one role the library does name a face for: the 2xs / bold / uppercase / tracked labels that title a section, head a table column, or sit as an eyebrow. It defaults to `inherit`, so out of the box nothing changes and the rule above still holds: a component wears whatever face its host sets. It exists because that role is where a host most often wants a DIFFERENT face from its running text — a monospace label reads as a system utterance rather than as prose, and it is exactly the register those three components already share (same size, same weight, same tracking). One declaration retunes all three; without it a host has to reach into three components' internals and would drift the day a fourth joins the register. */ --fold-font-label: inherit; /* Type scale — absolute px (the app root is 14px, so rem would render ~12% small; px is root-independent). `base` (14px) is body copy and sits ABOVE `md` (13px) on purpose: the t-shirt run is a size ladder, and `base` names the reference step on it rather than a rung. Reading order is 2xs → xs → sm → md → base → lg → xl → 2xl. Every step below is consumed by real code today; the scale stops at 24px because nothing in the library or the gallery is bigger, and a step nothing renders is a step that drifts. */ --fold-text-2xs: 10px; --fold-text-xs: 11px; --fold-text-sm: 12px; --fold-text-md: 13px; --fold-text-base: 14px; --fold-text-lg: 16px; --fold-text-xl: 20px; --fold-text-2xl: 24px; /* Weight scale — the weights that actually get rendered. Named, so `600` stops being a number 35 files agreed on by accident. `extrabold` is the display weight: it appears only on hero headings, always paired with `tracking-tightest` and a fluid size. */ --fold-weight-regular: 400; --fold-weight-medium: 500; --fold-weight-semibold: 600; --fold-weight-bold: 700; --fold-weight-extrabold: 800; /* Leading scale — unitless line-height, so it multiplies the element's own font-size. `none` is the single-line case (a badge, a button label); the rest are body rhythms. */ --fold-leading-none: 1; --fold-leading-tight: 1.2; --fold-leading-snug: 1.3; --fold-leading-normal: 1.5; --fold-leading-relaxed: 1.6; /* Tracking scale — letter-spacing. Three negatives, because tightening is a function of size: the bigger the type, the more of it. `tightest` belongs to hero headings, `tighter` to page titles. `caps` is the uppercase micro-label, the library's most common tracked role. */ --fold-tracking-tightest: -0.04em; --fold-tracking-tighter: -0.02em; --fold-tracking-tight: -0.01em; --fold-tracking-normal: 0; --fold-tracking-wide: 0.04em; --fold-tracking-caps: 0.07em; /* Icon size scale — the length a `fold-icon` renders at (width = height), selected by its size preset. A measurement, so theme-invariant like type and space. The component keeps a px fallback, so icons still render if a consumer loads components without the token layer. */ --fold-icon-size-xs: 12px; --fold-icon-size-sm: 16px; --fold-icon-size-md: 20px; --fold-icon-size-lg: 24px; --fold-icon-size-xl: 32px; /* Space scale — the shared spacing rhythm (gap / padding / margin). Promoted once a 2nd+ component needed it (icon, paginator, panel-header, data-table); the app's `--gap-*` bridge onto these 1:1. */ --fold-space-xs: 4px; --fold-space-sm: 8px; --fold-space-md: 12px; --fold-space-lg: 16px; --fold-space-xl: 20px; /* Larger steps on the 4px grid — section padding, page-level gaps, hero bands. The scale stays tight (no half-steps): a 4px-grid rhythm is the constraint; rare off-grid needs stay explicit literals, not tokens. */ --fold-space-2xl: 24px; --fold-space-3xl: 32px; --fold-space-4xl: 40px; --fold-space-5xl: 48px; /* Rail-width scale — the shared widths for the nav-rail hierarchy, named to pair 1:1 with the `--fold-color-bg-rail-*` colour tokens (primary app menu → secondary workspace/aside → tertiary in-page nav). Retune once, every rail follows; each layout's own `--fold--rail-*` var still overrides. */ --fold-rail-primary: 64px; /* app menu — the compact icon rail (fold-app-shell) */ --fold-rail-secondary: 220px; /* workspace / content aside (fold-aside-layout) */ --fold-rail-tertiary: 200px; /* in-page / section nav (fold-nav-layout) */ /* Motion scale — transition shorthands (duration + easing bundled, matching the app so `--t-*` bridge onto these 1:1). One knob per interaction speed. */ --fold-motion-fast: 0.1s ease; --fold-motion-base: 0.18s ease; --fold-motion-slow: 0.28s ease; /* Backdrop-blur radii (for frosted `--fold-color-glass` surfaces). */ --fold-blur-glass: 20px; /* Elevation scale — the shared depth language. Components name a level, never spell their own shadow. Theme-invariant: the ink is the black primitive via color-mix (no raw rgba), which reads acceptably on dark and light. `panel-*` are the directional side-panel shadows (+ inset glass highlight). */ --fold-shadow-sm: 0 1px 2px color-mix(in srgb, var(--fold-ref-black) 20%, transparent); --fold-shadow-md: 0 10px 30px -12px color-mix(in srgb, var(--fold-ref-black) 50%, transparent); --fold-shadow-lg: 0 12px 32px color-mix(in srgb, var(--fold-ref-black) 50%, transparent), 0 4px 12px color-mix(in srgb, var(--fold-ref-black) 35%, transparent); --fold-shadow-panel-right: -12px 0 40px color-mix(in srgb, var(--fold-ref-black) 45%, transparent), inset 1px 0 0 color-mix(in srgb, var(--fold-ref-white) 4%, transparent); --fold-shadow-panel-left: 12px 0 40px color-mix(in srgb, var(--fold-ref-black) 45%, transparent), inset -1px 0 0 color-mix(in srgb, var(--fold-ref-white) 4%, transparent); } /* ── Theme shape override: NAVI ─────────────────────────────── Back-office corporate: corners squared down, not squared off. The first pass ran 1/2/3/4px, which does not read as institutional — it reads as unset: at 1px a corner is a rendering artefact rather than an intention. `pill` and `round` are shapes, not scale steps — flattening them would turn avatars into squares and capsules into slabs — so they stay. */ [data-theme="navi"] { /* Depth. The base scale is tuned for a near-black ground: 50% black at a 30px blur reads as a grey smear on paper, not as a lifted card. navi trades opacity for spread — barely-there ink, wider falloff. */ --fold-shadow-sm: 0 1px 2px color-mix(in srgb, var(--fold-ref-graphite-950) 8%, transparent); --fold-shadow-md: 0 1px 2px color-mix(in srgb, var(--fold-ref-graphite-950) 6%, transparent), 0 8px 24px -16px color-mix(in srgb, var(--fold-ref-graphite-950) 24%, transparent); --fold-shadow-lg: 0 2px 4px color-mix(in srgb, var(--fold-ref-graphite-950) 6%, transparent), 0 16px 40px -20px color-mix(in srgb, var(--fold-ref-graphite-950) 28%, transparent); --fold-radius-xs: 2px; --fold-radius-sm: 4px; --fold-radius-md: 6px; --fold-radius-lg: 8px; } /* ── Theme shape override: BUBBLY ───────────────────────────── The opposite of navi: corners rounded right up, so every surface reads soft and pill-like. `pill` and `round` stay — they are shapes, not scale steps. */ [data-theme="bubbly"] { --fold-radius-xs: 6px; --fold-radius-sm: 12px; --fold-radius-md: 16px; --fold-radius-lg: 24px; } /* ── Theme shape override: TITAN ────────────────────────────── Softened, iPhone-premium: corners rounded a step past the base so a polished-steel card reads like a device, not a slab — but short of bubbly's pill. `pill` and `round` stay: shapes, not scale steps. */ [data-theme="titan"] { --fold-radius-xs: 5px; --fold-radius-sm: 10px; --fold-radius-md: 14px; --fold-radius-lg: 20px; }