/* ========================================================================== Whitestone Platforms — design tokens v3 "volt" v3 (Aug 5, 2026): repainted from the sunlit warm-cream ramp to the Volt colourway in public/preview/brand-direction.html — near-black surfaces, an acid-lime accent, one orange pop. Volt is one of the comp's "bold five": it inverts the whole value structure, so anything that used ink or olive-deep as a deliberately DARK fill (the CTA band, the ink callout, the phone-mockup screen) now renders as a deliberately BRIGHT fill instead. That is not a bug — it is the same trick the comp itself plays, just run the other direction. Base anchors (paper, ink, accent, deep, pop, line, chip/chipText, chipWarm/chipWarmText) are copied verbatim from the comp's volt palette. The extra surface steps this file carries that the comp does not (cream, limestone, stone) are interpolated between the comp's bg and paper, keeping the same ascending-toward-page relationship the sunlit ramp had, just inverted in direction. Rule: components read ONLY these variables. No raw hex in component code. ========================================================================== */ :root { /* --- Surface ramp: near-black, ascending toward the page's resting tone. paper is the comp's --bg (#101211), the most-recessed surface and the page background. limestone is the comp's --paper (#191C1A), used wherever the old ramp meant "a raised card." Cream and stone are interpolated steps; pebble matches the comp's --line exactly, since that is the one value the comp gives for a hairline. --- */ --ws-paper: #101211; /* page background. comp bg, the darkest note */ --ws-cream: #141715; /* secondary band tone, one step up from paper */ --ws-limestone: #191C1A; /* light... now dark cards and panels. comp paper */ --ws-stone: #20231F; /* heavier surfaces, feature tiles */ --ws-pebble: #2A2E2B; /* hairlines, strokes, dividers. NEVER text. comp line */ --ws-ivory: #101211; /* v1 alias, kept so nothing breaks */ /* --- Ink and accents --- */ --ws-ink: #F0F3EC; /* text, dark fills. comp ink — near-white here, because Volt inverts: the maximum-contrast anchor is light when the base is already dark */ --ws-gray-warm: #AEB4A8; /* secondary text. comp text. AA on every surface in the ramp above, all of which are dark */ --ws-olive: #C4F042; /* actions and fills. comp accent, the acid lime */ --ws-olive-deep: #D8FF63; /* small accent text, hover, dark bands. comp deep — brighter than olive, on purpose: this is the tone that has to read as text on the page's default dark surface */ --ws-sage: #7C9150; /* decorative ONLY */ --ws-terracotta: #FF7A4D; /* the pop. comp pop. One moment per view, or none */ --ws-sage-light: #D6F08A; --ws-sage-lighter: #E6F5B8; --ws-terracotta-deep:#FF9E7A; /* comp chipWarmText — the pop, legible on dark */ /* --- Semantic aliases: default context (the page is dark by default now) --- */ --ws-bg: var(--ws-paper); --ws-surface: var(--ws-stone); --ws-surface-light: var(--ws-limestone); --ws-text: var(--ws-ink); --ws-text-secondary: var(--ws-gray-warm); --ws-accent: var(--ws-olive-deep); /* small accent text is deep */ --ws-accent-bright: var(--ws-olive); /* 18px+ and fills */ --ws-stroke: var(--ws-pebble); --ws-stroke-focus: var(--ws-olive); --ws-pop: var(--ws-terracotta); /* --- Actions. The comp's own data — not its prose note — says Volt's onAccent is dark (#101211), same family as Quarry and Marigold: a bright fill this loud cannot carry white text at AA. So the primary button text is paper, not a hardcoded white. --- */ --ws-btn-primary-bg: var(--ws-olive); --ws-btn-primary-text: var(--ws-paper); --ws-btn-primary-hover: var(--ws-olive-deep); --ws-btn-emphasis-bg: var(--ws-ink); --ws-btn-emphasis-text: var(--ws-paper); --ws-btn-secondary-text: var(--ws-ink); --ws-btn-secondary-stroke: var(--ws-pebble); /* --- Status chips: tinted fill + bright text. comp chip/chipText and chipWarm/chipWarmText, verbatim. --- */ --ws-chip-positive-bg: #22301A; --ws-chip-positive-text: #C4F042; --ws-chip-neutral-bg: var(--ws-limestone); --ws-chip-neutral-text: var(--ws-gray-warm); --ws-chip-stroke: var(--ws-pebble); --ws-chip-warm-bg: #33231C; --ws-chip-warm-text: #FF9E7A; /* --- Typography. Fraunces stays the fixed display face; body moves to Karla per the comp's body axis; numbers move to IBM Plex Mono. Actual font-family values are supplied by next/font in layout.tsx, which sets these same variable names — this file only documents the fallback stack so nothing renders unstyled before the fonts attach. --- */ --ws-font-display: var(--font-fraunces), 'Fraunces', Georgia, serif; --ws-font-body: var(--font-karla), 'Karla', system-ui, sans-serif; --ws-font-mono: var(--font-plex-mono), 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; --ws-tracking-display: -0.01em; --ws-tracking-kicker: 0.24em; /* --- Shape and space --- */ --ws-radius-card: 12px; --ws-radius-pill: 999px; --ws-radius-swatch: 6px; --ws-stroke-width: 1.5px; --ws-hit-target: 44px; /* --- Elevation. Kept warm-dark rather than recomputed for a dark base — on a near-black surface these shadows mostly deepen the recess rather than lift the card, which still reads correctly as weight. --- */ --ws-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --ws-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.28), 0 12px 28px -10px rgba(0, 0, 0, 0.5); --ws-shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.32), 0 28px 56px -16px rgba(0, 0, 0, 0.6); /* --- Motion. One easing family. Everything decelerates, nothing bounces. --- */ --ws-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ws-ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ws-dur-fast: 160ms; --ws-dur: 280ms; --ws-dur-slow: 620ms; /* --- Strata mark courses, light context --- */ --ws-course-1: var(--ws-olive); --ws-course-2: #7A8570; --ws-course-3: var(--ws-stone); } /* --- Dark-fill context (olive-deep and ink backgrounds, and image scrims). Apply .ws-on-dark to any dark-filled container. Under Volt this class does two different jobs depending on what it is applied to, because Volt inverts which fills are actually dark: - .band and .callout-ink fill with olive-deep / ink, which under Volt are BRIGHT (#D8FF63, #F0F3EC). Their on-dark text needs to be DARK to stay AA-safe, and --ws-paper (now the darkest tone) supplies that automatically — no special-casing needed for those two. - The hero carousel's scrim is a fixed dark image treatment, hardcoded independently of these tokens, so it never inverts. Its on-dark text needs to stay LIGHT regardless of colourway. That override lives in globals.css, scoped to .hc-body.ws-on-dark, specific enough to win over the rule below. --- */ .ws-on-dark { /* Redeclaring the variable is not enough: `color` is inherited from body as an already-resolved value, so descendants keep ink unless the context re-applies it here. This line is what actually flips the text. */ color: var(--ws-paper); --ws-text: var(--ws-paper); --ws-text-secondary: var(--ws-paper); --ws-accent: var(--ws-paper); --ws-accent-bright: var(--ws-olive); --ws-stroke: rgba(16, 18, 17, 0.24); --ws-course-1: var(--ws-paper); --ws-course-2: var(--ws-olive-deep); --ws-course-3: var(--ws-olive); } /* ========================================================================== CONTRAST RULES (non-negotiable) - The surface ramp (paper, cream, limestone, stone) is dark under Volt, and carries ONLY ink text, warm-gray secondary text, olive-deep accents at any size, olive accents at 18px+ — the same rule as before, just against a dark floor instead of a light one. - Fills that invert bright under Volt (ink, olive-deep — see .ws-on-dark above) carry ONLY paper-dark text. - Pebble, stone, sage NEVER carry text and never appear AS text color. - Terracotta text: one emphasized word or figure, 18px+, once per view. - Text over imagery requires the ink scrim. This AMENDS v1, which forbade text on imagery outright. The scrim is what makes it legal. - Not in the table = not allowed. Default: ink on paper. ========================================================================== */