/* =========================================================== * tokens.css — GENERATED from app/R/tokens.R. DO NOT EDIT. * Regenerate: Rscript app/R/tokens.R generate * * WCAG AA contrast (real, computed): * text.primary on surface 17.49:1 req 4.5 PASS * text.primary on canvas 16.43:1 req 4.5 PASS * text.secondary on surface 10.34:1 req 4.5 PASS * text.muted on surface 7.33:1 req 4.5 PASS * link on surface 6.48:1 req 4.5 PASS * on-brand on brand fill 6.44:1 req 4.5 PASS * on-accent on accent fill 7.98:1 req 4.5 PASS * on-success on success fill 5.00:1 req 4.5 PASS * on-warning on warning fill 5.28:1 req 4.5 PASS * on-danger on danger fill 5.44:1 req 4.5 PASS * on-info on info fill 5.42:1 req 4.5 PASS * brand_ink as text 6.48:1 req 4.5 PASS * accent_ink as text 6.10:1 req 4.5 PASS * success_ink as text 7.29:1 req 4.5 PASS * danger_ink as text 8.01:1 req 4.5 PASS * =========================================================== */ :root { /* spacing (4px grid) */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* shadow */ --shadow-sm: 0 1px 2px 0 rgba(12,15,19,0.06), 0 1px 3px 0 rgba(12,15,19,0.05); --shadow-md: 0 2px 4px -1px rgba(12,15,19,0.07), 0 4px 12px -2px rgba(12,15,19,0.08); --shadow-lg: 0 8px 24px -4px rgba(12,15,19,0.12), 0 2px 6px -2px rgba(12,15,19,0.08); /* font families + weights */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* type roles: size / line-height / weight / tracking */ /* headings are FLUID via clamp() — scale with viewport, no breakpoints */ --fs-display: clamp(1.9987rem, 1.9987rem + 1vw, 2.4375rem); --lh-display: 1.15; --fw-display: 700; --tracking-display: -0.02em; --fs-h1: clamp(1.5887rem, 1.5887rem + 1vw, 1.9375rem); --lh-h1: 1.2; --fw-h1: 700; --tracking-h1: -0.01em; --fs-h2: clamp(1.2812rem, 1.2812rem + 1vw, 1.5625rem); --lh-h2: 1.25; --fw-h2: 600; --tracking-h2: -0.01em; --fs-h3: clamp(1.025rem, 1.025rem + 1vw, 1.25rem); --lh-h3: 1.35; --fw-h3: 600; --tracking-h3: 0; --fs-title: 1.125rem; --lh-title: 1.4; --fw-title: 600; --tracking-title: 0; --fs-body: 1rem; --lh-body: 1.55; --fw-body: 400; --tracking-body: 0; --fs-body-sm: 0.875rem; --lh-body-sm: 1.45; --fw-body-sm: 400; --tracking-body-sm: 0; --fs-caption: 0.8125rem; --lh-caption: 1.4; --fw-caption: 400; --tracking-caption: 0; --fs-overline: 0.75rem; --lh-overline: 1.2; --fw-overline: 600; --tracking-overline: 0.08em; /* neutral ramp */ --neutral-0: #ffffff; --neutral-50: #f6f8fa; --neutral-100: #eceff3; --neutral-200: #dce1e8; --neutral-300: #c3ccd6; --neutral-400: #97a3b2; --neutral-500: #6a7686; --neutral-600: #4d5765; --neutral-700: #38414d; --neutral-800: #252b34; --neutral-900: #151a20; --neutral-950: #0c0f13; /* brand + semantic (fill + ink) */ --color-brand: #ee7203; --color-brand-ink: #974800; --color-brand-hover: #cf6402; --color-accent: #c8a24a; --color-accent-ink: #7a5e16; --color-success: #1e7f4f; --color-success-ink: #14633c; --color-warning: #b7791f; --color-warning-ink: #8a5a12; --color-danger: #c0392b; --color-danger-ink: #97271b; --color-info: #2b6cb0; --color-info-ink: #1f5288; /* surface roles */ --surface-canvas: #f6f8fa; --surface-surface: #ffffff; --surface-sunken: #eceff3; --surface-border: #dce1e8; --surface-border-strong: #c3ccd6; /* text roles (contrast ratios documented in tokens.css header) */ --text-primary: #151a20; --text-secondary: #38414d; --text-muted: #4d5765; --text-link: #974800; /* on-fill text colours (correct ink for each semantic fill) */ --on-brand: #0c0f13; --on-accent: #0c0f13; --on-success: #ffffff; --on-warning: #0c0f13; --on-danger: #ffffff; --on-info: #ffffff; } /* ---- base / reset (derives from tokens above) ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); background: var(--surface-canvas); font-feature-settings: "cv05" 1, "ss01" 1; } /* numbers that must align use tabular figures */ .tnum, .kpi-value, td.num, .num { font-variant-numeric: tabular-nums; } /* ---- accessibility utilities ---- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- 2026 standards ---- */ /* native form controls adopt the brand (checkboxes, radios, sliders) */ :root { accent-color: var(--color-brand); } /* WCAG 2.2 (2.5.8) minimum target size for interactive controls */ button, .btn, [role="button"], a.action-button, .selectize-input, input[type="checkbox"], input[type="radio"] { min-height: 24px; } .btn { min-height: 32px; } /* WCAG 2.2 (2.4.11) keep focused elements clear of sticky overlays */ :target { scroll-margin-top: var(--space-8); } /* honour an explicit high-contrast preference */ @media (prefers-contrast: more) { :root { --surface-border: var(--neutral-400); --surface-border-strong: var(--neutral-500); --text-muted: var(--text-secondary); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-width: 3px; } } /* subtle brand tint derived from ONE colour (color-mix) — no extra hex to tune */ :root { --color-brand-subtle: color-mix(in srgb, var(--color-brand) 12%, var(--surface-surface)); }