/* =========================================================================== CAN-Agri prototype tokens Generated companion: tokens/canagri-tokens.json (produced FROM this file). Every value is sourced in docs/TOKENS-USED.md. Nothing is styled off-token. Rewritten 2026-09-04 after the recalibration (docs/RECALIBRATION.md) and the three reference teardowns (docs/REFERENCE-TEARDOWN.md). What changed: - Fedgroup's visual grammar is gone. The 56 56 56 0 section corner, the single-corner card accent and the diagonal image pair are all dropped: BOTH reference sites use zero asymmetric radii anywhere, and Lightship's radius set is byte-identical at 375px and at desktop (D-57). - Type is Valley Sans titles and Geist for text, labels, eyebrows and figure units (D-53, D-85; Geist Mono retired in D-194). - Display type carries NEGATIVE tracking by size band, which is much of why the references read expensive (D-58). - The accent is rationed to one or two elements per screen (D-59). =========================================================================== */ :root { color-scheme: light; /* ---- Colour ------------------------------------------------------------ CI hexes from Jacqui. The ground is Pantone 5535 C at her hex, chosen 2026-09-09 with her team's feedback that 548 C read too blue and 5463 C too black (D-173). 5463 C, the "deep" tone, is OUT of the palette; the hover step below is derived from the ground, not a Pantone. History: 5463 C (D-01) to 548 C (D-43, D-46) to 5535 C (D-173). */ --ca-teal: #163029; /* Pantone 5535 C, Jacqui's hex. The dark ground. Still called teal so no component renames */ --ca-teal-900: #0f2420; /* Hover on a ground fill. Derived, 5535 C at minus 15 percent lightness. Not a palette colour */ --ca-sage: #4e7f71; /* Pantone 625 C, Jacqui's match 2026-09-09 (D-171, D-175). Replaced the CI's 5555 C (#6d8f81) for contrast. Surfaces, borders, icons, stat figures */ --ca-mid: #aeccbe; /* Brand mid tone. Light surface */ --ca-tint: #c0d6d3; /* Pantone 5513 C. Light surface, text on teal */ /* Tint ramp off 5513 C, following this file's own convention where the plain token is the 500 and higher numbers go darker (see accent-600, teal-900). The lighter steps are percentage tints of it over white, for anything that needs the colour without the weight. 300 = 30 percent, #eef4f3, 1.13:1 on white 400 = 40 percent, #e7f0ef, 1.19:1 500 = the token, #c0d6d3, 1.52:1 on white, teal on it 9.28:1 and 250, half the 500, #e0ebe9, 1.22:1 on white, teal on it 11.59:1. Note 250 lands on exactly the same value as --ca-hairline. */ --ca-tint-250: #e0ebe9; /* half the 500. Same value as --ca-hairline */ --ca-tint-300: #eef4f3; --ca-tint-400: #e7f0ef; --ca-tint-500: var(--ca-tint); /* The accent lives against the dark: 10.69:1 on the ground, and 10.69:1 the other way with teal on an accent fill. 1.32:1 on white, so it is never text on a light surface. Rationed to one or two elements per screen. */ --ca-accent: #d1ed45; /* Pantone 2297, D-230 (was #e3ed45) */ --ca-accent-600: #c8e920; /* Hover on an accent fill */ --ca-accent-800: #4f5d09; /* The only accent legal as text on light, 7.24:1 */ --ca-accent-100: #fdfef6; /* A 5% screen of the accent over white, a FILL on light only, never text: the CAN-Agri column in the comparison table (D-239). Teal on it 13.89:1. Was a 25% screen #f4fad0, then 15% #f8fce3, each lightened on Jacqui's word (D-239, D-248) */ --ca-accent-125: #fafdec; /* A 10% screen of the accent: the CAN-Agri row in the comparison table's PHONE cards, where 5% read too faint on a small screen. Still a step under the 15% head (D-255). Teal on it 13.65:1, ink 12.25:1. Fill only, never text */ --ca-accent-150: #f8fce3; /* A 15% screen of the accent: the CAN-Agri column HEAD, one step over its 5% body, as the soft header sits over white rows elsewhere in the table (D-249). Teal on it 13.45:1 */ --ca-ink: #2e3435; /* Body text. 12.66:1 on white */ --ca-muted: #546e63; /* Secondary text on light. 5.54:1 */ --ca-hairline: #e0ebe9; /* Borders and rules */ --ca-soft: #f3f7f6; /* Soft surface */ --ca-white: #ffffff; --ca-error: #a85a4d; /* Form error. 4.96:1 on white. Provisional */ --ca-grade: #546e63; /* Comparison grade, graded by geometry */ /* Role aliases, so components never name a brand colour directly */ --ca-bg: var(--ca-white); --ca-bg-tint: var(--ca-soft); --ca-bg-dark: var(--ca-teal); --ca-text: var(--ca-ink); --ca-text-muted: var(--ca-muted); --ca-text-on-dark: var(--ca-white); --ca-text-muted-on-dark: var(--ca-tint); /* Stat figures. The darker sage (D-171) measures 4.57:1 on white and 3.75:1 on tint-250, so it now clears AA for normal text on white as well as for the large figures at 42, 36 and 26px. The 2026-09-08 sage was 3.56:1 and legal only on the figures (D-123, D-127). */ --ca-text-figure: var(--ca-sage); /* The edge of an unselected control: tabs, inputs, quiet buttons, carousel and dialog buttons. Was the hairline, 1.22:1 on white, too light to see as a control (Jacqui, 2026-10-15) and under WCAG 1.4.11's 3:1 for a component's boundary. Sage measures 4.57:1 on white and 4.2:1 on the soft tint. Dividers, cards and table rules keep the hairline (D-219). */ --ca-border-control: var(--ca-sage); /* ---- Type: two faces -------------------------------------------------- Valley Sans titles, Geist for everything else, labels included. Geist Mono is RETIRED (D-194, 2026-10-09): Tim's review read it as "a placeholder (throughout the site)" and the investor list as "four different fonts". Labels keep their own token so the face can be changed in one line. All self-hosted. The fallbacks are metric-matched and MEASURED: Valley Sans sits at 109.0 percent of Helvetica's advance width, Geist at 99.9. The display scale is Krub's old scale times 0.945, rounded to whole pixels. Valley sets 5.8 percent wider than Krub at the same size, so the trim puts it back in the same horizontal space. Cap-height matching would have been 0.972; the wider-running set width is what needed answering (D-85). */ --ca-font-display: "Valley Sans", "Valley Sans fallback", sans-serif; --ca-font-text: "Geist", "Geist fallback", sans-serif; --ca-font-label: var(--ca-font-text); --ca-size-h1: 60px; --ca-size-h2: 36px; /* 42 to 40 (D-242), then 36 for Jacqui's review (D-250) */ --ca-size-h3: 26px; --ca-size-h4: 19px; --ca-size-lead: 18px; /* 20 to 18 with the H2 (D-242), 17 in D-244, back to 18 two clear steps over body (D-246) */ --ca-size-body: 16px; /* Buttons get their own size again. It was following --ca-size-caption at 12px once the labels went mono and uppercase; Jacqui asked for 2 smaller. 10px is 1 below Terminal's 11. Tracking stays 0.14em, so the label still reads as a label rather than shrunken body copy (D-90). */ --ca-size-btn: 10px; --ca-size-small: 14px; --ca-size-caption: 12px; /* 12 to 14: Tim, "too small (I'm not saying it should dominate the headline)". */ --ca-size-eyebrow: 15px; /* 14 to 16 (D-202), then 16 to 15 for the system, Jacqui 2026-10-20 (D-243) */ --ca-size-stat: 42px; /* The opening statement is its own role: one paragraph carrying the whole proposition, read second after a 60px headline. h3 at 26 was too quiet and h2 at 42 competes with the hero, so it sits between them. D-98. */ --ca-size-statement: 32px; /* The green page head's title and lead, closer in scale than the global h1 and lead: "the contrast of the scale of the line below the title and the title is too vast" (Jacqui, 2026-10-15, D-227). 60/20 was 3:1; 56/24 is 2.3:1. */ --ca-size-pagehead-title: 56px; --ca-size-pagehead-lead: 24px; /* 1.05 to 1.15, Jacqui 2026-10-15 (D-212): the title animation clips each word to its line box, and at 1.05 descenders hung 0.021em below it, so the "g" in the hero line was cut. 1.10 clears by 0.004em, 1.15 by 0.029em, and 1.15 is what every other heading already uses. */ --ca-lh-display: 1.15; --ca-lh-tight: 1.15; /* Button labels only. The scale had nothing between 1.15 and 1.5, and both were wrong for a stacked uppercase mono label: 1.5 read as two separate lines, 1.15 too cramped. Terminal sits at 1.2. This is a real role, so it gets a token rather than a number in the component (D-90). */ --ca-lh-btn: 1.3; --ca-lh-lead: 1.425; /* 1.5 less 5%, Jacqui 2026-10-20 (D-244) */ --ca-lh-body: 1.6; --ca-lh-flat: 1; --ca-weight-regular: 400; --ca-weight-medium: 500; --ca-weight-semibold: 600; --ca-weight-bold: 700; /* The section lead's own weight, medium so it separates from 16-regular body without outweighing the 500 Valley Sans heading above it; semibold did, and rewrapped the line (D-247). */ --ca-weight-lead: 500; /* Display weight is an INVERSE RAMP, not one value: as the size falls the weight rises, so optical presence stays level (D-86). Valley at 700 blooms on the dark ground and closes its counters; at 400 it is elegant at hero size but at 26px an accordion label stops outweighing the 400 body text beneath it. Hence 400 / 500 / 600 down the scale. */ --ca-weight-h1: 400; --ca-weight-h2: 500; --ca-weight-h3: 600; /* Tracking by size band, measured off lightshiprv.com, which applies it as a proportional rule consistent to three decimals across breakpoints. */ --ca-track-h1: -0.05em; --ca-track-h2: -0.03em; --ca-track-h3: -0.02em; --ca-track-h4: -0.01em; --ca-track: 0; --ca-track-eyebrow: 0.1em; /* uppercase, D-48. 0.14em was set for a mono, whose fixed advance already spaces it; a proportional face needs less (D-194) */ --ca-track-btn: 0.02em; /* ---- Spacing: one scale, nothing else in any computed value ----------- */ --ca-space-1: 4px; --ca-space-2: 8px; --ca-space-3: 12px; --ca-space-4: 16px; --ca-space-5: 24px; --ca-space-heading-lead: 20px; /* heading to its lead only, 24 less 4, Jacqui 2026-10-20 (D-245). Not a general step */ --ca-space-6: 32px; --ca-space-7: 40px; --ca-space-8: 48px; --ca-space-9: 56px; --ca-space-10: 64px; --ca-space-11: 84px; --ca-space-12: 96px; --ca-space-13: 128px; --ca-space-14: 160px; /* ---- Layout ----------------------------------------------------------- */ --ca-content-max: 1440px; --ca-outer-max: 1920px; --ca-gutter: var(--ca-space-12); --ca-gap-col: var(--ca-space-5); --ca-measure: 68ch; /* Two numbers now, not one. The bar no longer contains the lock-up, so it sits LOWER to give the gable room above it (D-189), and anything that has to clear the bar needs the offset as well as the height. --ca-header-h stays the bar's own height so nothing downstream changes meaning. */ --ca-header-top: 72px; --ca-header-h: 78px; --ca-header-clear: calc(var(--ca-header-top) + var(--ca-header-h)); /* ---- Radius: UNIFORM ONLY, fixed at every breakpoint ------------------ Two references, zero asymmetric radii between them. Terminal's workhorse is 8px, Lightship's is 20px, and neither changes on mobile. Four values by role. Full-bleed structural bands take none. */ --ca-r-input: 4px; --ca-r-control: 8px; --ca-r-media: 16px; --ca-r-panel: 24px; /* ---- Shadows: tinted with the ground, never grey. Three per page max -- */ --ca-shadow-card: 0 2px 6px rgba(0, 48, 60, .10), 0 6px 16px rgba(0, 48, 60, .07); --ca-shadow-media: 0 4px 12px rgba(0, 48, 60, .12), 0 12px 32px rgba(0, 48, 60, .08); --ca-shadow-input: 0 0 16px -4px rgba(0, 48, 60, .10), 0 4px 4px -4px rgba(0, 48, 60, .04); /* ---- Motion ----------------------------------------------------------- 120 to 320ms for interface response. The 700ms tier is for hero and section entrances only, raised from the brief's 400ms ceiling because the references build their feel from longer choreographed entrances (D-56). */ --ca-dur-fast: 120ms; --ca-dur-base: 200ms; --ca-dur-slow: 320ms; --ca-dur-entrance: 700ms; --ca-ease-out: cubic-bezier(.22, .61, .36, 1); --ca-ease-in: cubic-bezier(.55, .06, .68, .19); } /* Large: 769 to 1280 */ @media (max-width: 1280px) { :root { --ca-size-h1: 53px; --ca-size-pagehead-title: 50px; --ca-size-pagehead-lead: 22px; --ca-size-statement: 30px; --ca-size-h2: 32px; --ca-size-h3: 25px; --ca-size-lead: 18px; --ca-size-stat: 36px; --ca-gutter: var(--ca-space-8); } } @media (max-width: 1024px) { :root { --ca-gutter: var(--ca-space-6); } } /* Small: up to 767. Display drops about 40 percent, body holds at 16px, and the radius set does not change, exactly as both references do it. */ @media (max-width: 767px) { :root { --ca-size-h1: 40px; --ca-size-pagehead-title: 40px; --ca-size-pagehead-lead: 20px; --ca-size-statement: 26px; --ca-size-h2: 24px; /* 22 to 24, two clear of the H3 (D-299) */ --ca-size-h3: 21px; --ca-size-h4: 18px; --ca-size-lead: 18px; --ca-size-stat: 26px; --ca-gutter: var(--ca-space-5); --ca-gap-col: var(--ca-space-6); --ca-measure: 58ch; --ca-header-top: 56px; --ca-header-h: 72px; --ca-track-h2: -0.02em; } } /* X-Small: up to 480 */ @media (max-width: 480px) { :root { --ca-size-h1: 32px; --ca-size-pagehead-title: 32px; --ca-size-pagehead-lead: 18px; --ca-size-statement: 23px; --ca-size-h2: 22px; /* 20 to 22 (D-299) */ --ca-size-h3: 19px; --ca-size-stat: 23px; --ca-gutter: var(--ca-space-4); --ca-measure: 46ch; } }