/* cmpnd Aug26 design system tokens, ported from the design system's tokens/*.css. Fonts load from Google Fonts in each page's ; the stack lives in --font-core. */ /* ---- colors ---- */ /* Cmpnd color — brand anchors, seven families x ten steps, neutrals. Palette is Riso-derived: printed-manual saturation, not screen neon. */ :root{ /* --- brand anchors (brand book p.14) --- */ --color-pine-needle:#025428; --color-woad:#3D5FFA; --color-sun-adder:#FFB511; --color-watermelon:#F2586B; --color-chalk:#F2F4F6; --color-ink:#1F1B18; --color-paper:#FFFFFF; /* --- families (brand book p.16). The brand color is one step of its family. --- */ --pine-needle-900:#0C2715;--pine-needle-800:#0D3F20;--pine-needle-700:#025428;--pine-needle-600:#057239;--pine-needle-500:#088D48;--pine-needle-400:#0CA957;--pine-needle-300:#3DC370;--pine-needle-200:#73D992;--pine-needle-100:#AFEABD;--pine-needle-50:#E4F1E7; --verdigris-900:#152424;--verdigris-800:#1F393A;--verdigris-700:#295151;--verdigris-600:#32696A;--verdigris-500:#387778;--verdigris-400:#509C9D;--verdigris-300:#6EB4B5;--verdigris-200:#91CCCC;--verdigris-100:#BBE2E2;--verdigris-50:#E5EFEF; --woad-900:#141D4A;--woad-800:#1B2C7C;--woad-700:#1E3AB6;--woad-600:#2E4EE4;--woad-500:#3D5FFA;--woad-400:#6D86F5;--woad-300:#93A3ED;--woad-200:#B6BEE7;--woad-100:#D5D9E8;--woad-50:#ECECF0; --iris-900:#251A35;--iris-800:#3C2956;--iris-700:#54377C;--iris-600:#6E46A3;--iris-500:#8554C4;--iris-400:#9B7ACE;--iris-300:#AF9BD1;--iris-200:#C4BAD6;--iris-100:#DAD7E1;--iris-50:#EDECEF; --watermelon-900:#381316;--watermelon-800:#5B1A23;--watermelon-700:#811F2F;--watermelon-600:#AA223B;--watermelon-500:#D2284A;--watermelon-400:#F2586B;--watermelon-300:#E9848B;--watermelon-200:#E4B0B2;--watermelon-100:#E7D4D4;--watermelon-50:#F0EBEC; --sienna-900:#2E1B12;--sienna-800:#4B2A1B;--sienna-700:#6B3A23;--sienna-600:#8C4B2B;--sienna-500:#A65832;--sienna-400:#CD7145;--sienna-300:#DE906C;--sienna-200:#DEB5A3;--sienna-100:#E4D6CF;--sienna-50:#EFECEA; --sun-adder-900:#292000;--sun-adder-800:#403401;--sun-adder-700:#5A4802;--sun-adder-600:#755E04;--sun-adder-500:#907506;--sun-adder-400:#AE8C08;--sun-adder-300:#CCA50C;--sun-adder-200:#F3C200;--sun-adder-100:#FFDD55;--sun-adder-50:#F3EFE1; /* Cobalt exists only to carry the info state. It is not a brand family. */ --cobalt-700:#164885;--cobalt-100:#D1DAE6;--cobalt-200:#A8C2E3; /* --- neutrals: one grey per job (brand book p.17) --- */ --ink-100:#E4E1DE;--ink-200:#D1CDCA;--ink-300:#B7B1AD;--ink-400:#9C9591;--ink-500:#817A75;--ink-600:#67605B;--ink-700:#4F4742;--ink-800:#373028;--ink-900:#1F1B18; } /* ---- typography ---- */ /* Type usage lifted from brand book p.21: size / line-height / tracking. */ :root{ --text-headline-xl:150px; --lh-headline-xl:1.00; /* @kind other */ --ls-headline-xl:-0.02em; /* @kind other */ --fw-headline-xl:300; /* @kind other */ --text-headline-lg:132px; --lh-headline-lg:0.96; /* @kind other */ --ls-headline-lg:0; /* @kind other */ --fw-headline-lg:300; /* @kind other */ --text-headline-md:44px; --lh-headline-md:1.10; /* @kind other */ --ls-headline-md:-0.02em; /* @kind other */ --fw-headline-md:700; /* @kind other */ --text-subhead:26px; --lh-subhead:1.20; /* @kind other */ --ls-subhead:-0.01em; /* @kind other */ --fw-subhead:700; /* @kind other */ --text-body:18px; --lh-body:1.40; /* @kind other */ --ls-body:0; /* @kind other */ --fw-body:300; /* @kind other */ --text-label:16px; --lh-label:1.00; /* @kind other */ --ls-label:0.02em; /* @kind other */ --fw-label:300; /* @kind other */ /* UI-scale steps derived from the same ratios for dense product surfaces */ --text-ui-lg:16px; --text-ui:14px; --text-ui-sm:13px; --text-ui-xs:11px; --lh-ui:1.35; /* @kind other */ --fw-light:300; /* @kind other */ --fw-regular:400; /* @kind other */ --fw-medium:500; /* @kind other */ --fw-bold:700; /* @kind other */ } /* ---- spacing ---- */ /* One square, one grid. The module is the unit; spacing is module fractions. */ :root{ --module:16px; --space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:24px;--space-7:32px;--space-8:48px;--space-9:64px;--space-10:96px;--space-11:128px; --gutter:24px; --page-margin:48px; --measure:68ch; /* @kind other */ /* logo clear space = X/2, X = lockup height */ --logo-clear-ratio:0.5; /* @kind other */ } /* ---- border-radius ---- */ /* The brand is square. Radius is the exception, never the default. */ :root{ --radius-none:0px; --radius-sm:2px; /* controls, inputs, buttons */ --radius-md:4px; /* dialogs, popovers */ --radius-pill:999px; /* pills and tags only */ --border-hair:1px; --border-heavy:2px; --border-color:var(--ink-200); --border-color-strong:var(--ink-300); --border-color-control:var(--ink-400); } /* ---- elevation ---- */ /* Printed manuals have no drop shadows. Depth is a rule, not a blur. The two shadows below exist only for things that genuinely float. */ :root{ --shadow-none:none; --shadow-popover:0 2px 0 0 rgba(31,27,24,.10),0 8px 24px -12px rgba(31,27,24,.28); --shadow-dialog:0 4px 0 0 rgba(31,27,24,.12),0 24px 64px -24px rgba(31,27,24,.35); --scrim:rgba(31,27,24,.56); /* @kind other */ --blur-scrim:blur(2px); /* @kind other */ } /* ---- motion ---- */ /* Mechanical, not playful. Nothing bounces; nothing overshoots. */ :root{ --dur-instant:80ms; /* @kind other */ --dur-fast:120ms; /* @kind other */ --dur-base:180ms; /* @kind other */ --dur-slow:280ms; /* @kind other */ --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */ --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */ --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */ --ease-step:steps(6,end); /* @kind other */ } /* ---- semantic ---- */ /* Semantic aliases. Reach for these first; reach for a family step only when the surface genuinely has no name yet. */ :root{ --surface-page:var(--color-chalk); --surface-card:var(--color-paper); --surface-sunken:var(--ink-100); --surface-inverse:var(--color-ink); --surface-brand:var(--color-pine-needle); --surface-table-header:var(--ink-100); --text-primary:var(--color-ink); --text-secondary:var(--ink-700); --text-muted:var(--ink-600); --text-disabled:var(--ink-400); --text-on-brand:var(--color-chalk); --text-on-inverse:var(--color-chalk); --text-link:var(--color-pine-needle); --text-link-hover:var(--pine-needle-500); --rule:var(--ink-200); --edge-card:var(--ink-300); --edge-control:var(--ink-400); --action-primary-bg:var(--color-pine-needle); --action-primary-bg-hover:var(--pine-needle-800); --action-primary-bg-active:var(--pine-needle-900); --action-primary-fg:var(--color-chalk); --action-secondary-bg:transparent; --action-secondary-fg:var(--color-ink); --action-ghost-bg-hover:var(--ink-100); --focus-ring:var(--color-woad); /* four states, three values each: text, tint ground, border (brand book p.18) */ --ok-text:#025428; --ok-tint:#AFEABD; --ok-tint-soft:var(--pine-needle-50); --ok-border:#73D992; --warn-text:#614202; --warn-tint:#F1D5A9; --warn-tint-soft:var(--sun-adder-50); --warn-border:#D8990D; --info-text:#164885; --info-tint:#D1DAE6; --info-tint-soft:var(--woad-50); --info-border:#A8C2E3; --error-text:#811F2F;--error-tint:#E7D4D4;--error-tint-soft:var(--watermelon-50);--error-border:#E4B0B2; } [data-theme="ink"]{ --surface-page:var(--color-ink); --surface-card:var(--ink-800); --surface-sunken:#151210; --text-primary:var(--color-chalk); --text-secondary:var(--ink-300); --text-muted:var(--ink-400); --rule:var(--ink-700); --edge-card:var(--ink-700); --edge-control:var(--ink-600); --text-link:var(--pine-needle-200); --text-link-hover:var(--pine-needle-100); --action-primary-bg:var(--pine-needle-400); --action-primary-fg:var(--color-ink); --action-ghost-bg-hover:var(--ink-700); } /* ---- fonts ---- */ :root{ --font-core:"Archivo","New Rail Alphabet","Helvetica Neue",Helvetica,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; }