/* ==========================================================================
ELVIS DS ยท tokens
Concatenated verbatim from the design system's tokens/ directory.
Source: ~/.claude/skills/elvis-ds-design/tokens/
Values are not to be edited here. Change them in the design system first.
One deliberate difference from tokens/fonts.css: the Google Fonts @import
is NOT here. It is a + in
each page's instead, because an @import inside a stylesheet blocks
and serialises the font request. Same two faces, fetched earlier.
========================================================================== */
:root {
--font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-body: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-label: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root {
/* Green family */
--green-500: #43d48b; /* Signal Green - primary */
--green-700: #2FA84F;
--green-900: #123B22; /* Forest - floods, footers */
/* Paper family */
--sand-100: #F5F1EA; /* default background */
--sand-200: #F4F3F1; /* Off White - cool alternative */
--sand-300: #EBE3D5; /* cards, table stripes */
--sand-400: #DED3C0;
--white: #FFFFFF;
/* Ink */
--ink-900: #14150F;
--ink-rule: rgba(20, 21, 15, 0.14);
--ink-rule-strong: rgba(20, 21, 15, 0.20);
--ink-60: rgba(20, 21, 15, 0.60);
--ink-72: rgba(20, 21, 15, 0.72);
/* On dark */
--sand-rule: rgba(242, 237, 227, 0.24);
--sand-70: rgba(242, 237, 227, 0.70);
--sand-08: rgba(242, 237, 227, 0.08);
}
:root {
/* Display / headline - Archivo 800, negative tracking */
--display-size: clamp(56px, 13.4vw, 216px);
--display-weight: 800;
--display-tracking: -0.045em;
--display-leading: 0.82;
--h1-size: clamp(34px, 5.6vw, 88px);
--h1-tracking: -0.038em;
--h1-leading: 0.94;
--h2-size: clamp(28px, 3vw, 44px);
--h2-tracking: -0.028em;
--h2-leading: 1.05;
--h3-size: 24px;
--h3-weight: 700;
--h3-tracking: -0.02em;
--h3-leading: 1.25;
/* Body - Schibsted Grotesk 400 */
--body-size: 17px;
--body-leading: 1.6;
--body-weight: 400;
--body-emphasis-weight: 600;
--body-small-size: 15px;
--body-small-leading: 1.55;
--body-measure: 68ch;
/* Label - Archivo, uppercase, tracked +8%, tabular */
--label-size: 11px;
--label-size-sm: 10px;
--label-tracking: 0.09em;
--label-weight-on-light: 400;
--label-weight-on-dark: 500;
--label-transform: uppercase;
}
:root {
/* Seven steps. Nothing in between. */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 40px;
--space-6: 64px;
--space-7: 120px;
/* Screen grid */
--grid-columns: 12;
--grid-gutter: 32px;
--page-margin: 40px;
--section-padding: 120px;
/* Paper grid (A4) */
--paper-columns: 6;
--paper-gutter: 6mm;
--paper-margin: 18mm;
--paper-baseline: 4mm;
}
:root {
--radius: 0; /* radius 0 everywhere */
--rule-width: 1px;
--rule: 1px solid rgba(20, 21, 15, 0.14);
--rule-strong: 1px solid rgba(20, 21, 15, 0.20);
--rule-on-dark: 1px solid rgba(242, 237, 227, 0.24);
--shadow: none; /* no shadow system */
}
:root {
--dur-quick: 180ms;
--dur-base: 420ms;
--dur-reveal: 720ms;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-inout: cubic-bezier(.65, 0, .35, 1);
--ease-marquee: linear;
--enter-y: 28px;
--hover-y: -4px;
--stagger: 70ms;
}
:root {
--surface-page: var(--sand-100);
--surface-page-alt: var(--sand-200);
--surface-card: var(--sand-300);
--surface-card-plain: var(--white);
--surface-invert: var(--ink-900);
--surface-flood: var(--green-500);
--surface-flood-deep: var(--green-900);
--text-body: var(--ink-900);
--text-muted: var(--ink-72);
--text-on-invert: var(--sand-100);
--text-on-invert-muted: var(--sand-70);
--text-accent-on-invert: var(--green-500);
--action-bg: var(--green-500);
--action-fg: var(--ink-900);
--action-bg-hover: var(--ink-900);
--action-fg-hover: var(--green-500);
--border-default: var(--ink-rule);
--border-strong: var(--ink-rule-strong);
}