/* ========================================================================== Baiond — Design Tokens -------------------------------------------------------------------------- Single source of truth for the visual identity. Components and base styles consume semantic tokens, never primitives directly. Ground rules (see .planned/project-brief.md → Brand & visual cues): · Styleguide v25-05 palette is binding. Pure black / pure white grounds, no tinted page backgrounds. Off-White is allowed *inside frames* only. · Lime is spent precisely: edges, values, glows, one filled CTA per view. · Shadows are none or glow. No grey drop shadows. · Medium weights, large display sizes, tight display tracking. · Two schemes. Light is the product's native look; black panels (hero, proof, industries band) stay black in both. Two-tier system: 1. Primitives — raw brand values. Stable. 2. Semantic — meaningful aliases (--color-bg, --color-accent, …). Light defaults at :root, dark via [data-theme="dark"] (the toggle; the OS scheme is not consulted) is set (the head script sets one before first paint). ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — brand values (styleguide v25-05) ---------------------------------------------------------------- */ /* Energy Green. The styleguide (v25-05) pins #CAE825; the old site renders #DBF936 on screen (its pattern file is drawn in it) and the lighter value sits better on white. `--lime` points at one of the two — swap the reference to compare. */ --lime-light: #DBF936; --lime-original: #CAE825; --lime: var(--lime-light); /* Staging switcher (partials/lime-switch.php, config → lime_switcher): `data-lime="original"` on re-points --lime page-wide. */ --black: #000000; /* baiond Black */ --white: #FFFFFF; /* baiond White */ --aqua: #00A6A0; /* Aqua Blue — secondary */ --slate: #69786F; /* Slate Green — secondary */ --off-white: #F1F3F5; /* Off-White — neutral, frames only */ /* Lime variants for gradients + glows (derived, not a new colour) */ --lime-bright: #E8FF5C; /* hover / peak — a step above --lime-light */ --lime-deep: #B4D11B; /* arcs on white, where the light lime vanishes */ /* PARKED with the backdrop (Phase 8.1). Was the one washed exception: the fixed page backdrop in the light scheme. --lime at any opacity reads as pale yellow on white; this is lime pulled toward slate — darker, greyer — so the triangles read as lime *shapes* and not as a stain. Not for fills, text or markers. */ --lime-washed: #B3C24F; /* Neutrals are *not* a grey ramp. They're the two grounds mixed with each other so text and hairlines stay tinted toward the ground they sit on — never a muddy mid-grey. */ --ink-90: color-mix(in oklab, var(--black) 90%, var(--white)); --ink-70: color-mix(in oklab, var(--black) 70%, var(--white)); /* Subtle text: mixed in sRGB on purpose (= #666, 5.7:1 on white). The oklab 55 % mix rendered #717171 (4.3:1, fails AA for small text). */ --ink-55: color-mix(in srgb, var(--black) 60%, var(--white)); --paper-90: color-mix(in oklab, var(--white) 90%, var(--black)); --paper-85: color-mix(in oklab, var(--white) 85%, var(--black)); /* muted text on black (2026-10-08: 70 read too grey) */ --paper-70: color-mix(in oklab, var(--white) 70%, var(--black)); --paper-55: color-mix(in srgb, var(--white) 55%, var(--black)); /* #8c8c8c, 6.2:1 on black — the oklab mix was #717171 (4.3:1) */ /* Spacing — hybrid 4-then-doubling scale */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ --space-12: 16rem; /* 256px */ /* Air between the header bar and a page's first block (crumbs / hero) */ --page-top: clamp(var(--space-6), 1.25rem + 2vw, var(--space-8)); /* Section rhythm — vertical padding of a band */ --section-y: clamp(4rem, 3rem + 5vw, 8rem); /* Fluid type scale — clamp(min, fluid, max). Min ~360px, max ~1280px. The top three steps are display sizes and run larger than a default SaaS scale on purpose (brief: large type, medium weight). */ --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); /* 12 → 13px */ --text-sm: clamp(0.875rem, 0.83rem + 0.21vw, 0.9375rem); /* 14 → 15px */ --text-base: clamp(1rem, 0.95rem + 0.21vw, 1.0625rem); /* 16 → 17px */ --text-lg: clamp(1.125rem, 1.06rem + 0.30vw, 1.25rem); /* 18 → 20px */ --text-xl: clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem); /* 20 → 24px */ --text-2xl: clamp(1.5rem, 1.32rem + 0.89vw, 2rem); /* 24 → 32px */ --text-3xl: clamp(1.875rem, 1.50rem + 1.80vw, 2.75rem); /* 30 → 44px */ --text-4xl: clamp(2.25rem, 1.60rem + 3.10vw, 3.75rem); /* 36 → 60px */ --text-5xl: clamp(2.75rem, 1.80rem + 4.40vw, 4.75rem); /* 44 → 76px */ --text-display: clamp(3rem, 1.75rem + 5.60vw, 5.75rem); /* 48 → 92px */ /* Line heights */ --leading-none: 1; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-display: -0.035em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; /* Font weights — Atkinson Hyperlegible Next is variable 200–800. Medium is the workhorse; bold is reserved. */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Font families. Sans for everything — the operator vetoed mono on the public side (Phase 0 review), so --font-mono is defined and the Mono face is on disk, but nothing uses it yet; data values run in the sans with tabular figures. Inter stays as the sanctioned fallback. */ --font-sans: "Atkinson Hyperlegible Next", "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Radii — pill for controls, large radius for panels */ --radius-none: 0; --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-panel: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); --radius-full: 9999px; /* Shadows: none. Elevation is expressed with hairlines + glow. The three --shadow-* names stay defined (base/utilities reference them) but resolve to nothing. */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; /* Glow — lime bloom, tuned per scheme below */ --glow-lime-soft: 0 0 0 1px color-mix(in oklab, var(--lime) 45%, transparent), 0 0 28px color-mix(in oklab, var(--lime) 22%, transparent); --glow-lime-strong: 0 0 0 1px color-mix(in oklab, var(--lime) 70%, transparent), 0 0 40px color-mix(in oklab, var(--lime) 38%, transparent); /* Highlight on OUTLINED surfaces (cards, tiles, icon boxes, the assistant launcher) on hover / focus. Lime cannot be a hairline on white (1.2:1) — a translucent lime border read as the border vanishing (operator, 2026-09-14). So: the line stays what it is at rest and a SOLID lime offset shadow appears — the same treatment in both schemes and on black panels (operator: consistency); only the line colour follows the surface. `-sm` is for icon boxes. Chips and icon buttons don't use these — they FILL lime on hover, like .btn--secondary. */ --hover-border: var(--black); --hover-shadow: 4px 4px 0 0 var(--lime); --hover-shadow-sm: 3px 3px 0 0 var(--lime); /* Card surfaces (Phase 8.1, operator): the highlight pair above is the REST state of an outlined card now — the hard line alone read too harsh. Hover lifts the card up-left while the shadow doubles, so the shadow's outer edge stays put: the card comes off the page. */ --card-border: var(--hover-border); --card-shadow: 4px 4px 0 0 var(--lime); --card-shadow-lift: 8px 8px 0 0 var(--lime); --card-lift: -4px -4px; /* Motion */ --duration-fast: 140ms; --duration-normal: 240ms; --duration-slow: 420ms; --duration-reveal: 700ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1); /* Layout containers — `.container` is the shell (the same width as the hero panel and the header bar); the modifiers narrow it. */ --container-shell: var(--shell-max); /* 1600px — .container (default) */ --container-content: 86rem; /* 1376px — .container--content: the Ask showcase, reading-heavy bands */ --container-narrow: 40rem; /* 640px — .container--narrow: prose */ --shell-max: 100rem; /* 1600px — hero panel + header bar share this */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* Header */ --header-height: 3.75rem; --header-offset: calc(var(--header-height) + var(--space-4) * 2); /* ---------------------------------------------------------------- 2. SEMANTIC — light theme defaults ---------------------------------------------------------------- */ color-scheme: light; /* Grounds — pure. No tinted sub-surface anywhere in the light scheme (Phase 4.1: the Off-White muted step read as grey on screen); nested surfaces — chat bubbles, the live data panel, device chrome — sit on the same white and separate with a hairline (--color-border) instead. --color-bg-raised is the one *visible* step, and only dark mode has it. */ --color-bg: var(--white); --color-bg-subtle: var(--white); /* no tinted sub-surfaces on the page ground */ --color-bg-muted: var(--white); /* nested surfaces: pure + hairline */ --color-bg-raised: var(--white); /* bubbles / cards on a surface: pure + hairline */ --color-bg-inset: var(--white); /* form controls */ --color-bg-alt: #F4F7FC; /* the one tinted ground: cool paper for alternating bands (.band--alt) */ --color-panel: var(--black); /* the black panel — same in both schemes */ /* Text */ --color-text: var(--black); --color-text-muted: var(--ink-70); --color-text-subtle: var(--ink-55); --color-text-on-accent: var(--black); --color-text-on-panel: var(--white); --color-text-on-panel-muted: var(--paper-85); /* Hairlines */ /* Borders on the white ground are pure black hairlines, not soft grey — a translucent line reads as a smudge on a pure ground (operator, 2026-09-12). Dark mode keeps translucent white lines. */ /* Pure black read as too heavy once every card had one (operator, 2026-09-14): 70 % for the resting hairline, 85 % for emphasis; --hover-border brings it to full black on hover. */ --color-border: rgb(0 0 0 / 0.7); --color-border-strong: rgb(0 0 0 / 0.85); --color-border-on-panel: rgb(255 255 255 / 0.14); --color-border-on-panel-strong: rgb(255 255 255 / 0.26); /* Accent — lime. Text on lime is always black (contrast). Lime as *text* fails on white, so links on the light ground use the text colour with a lime underline instead. */ --color-accent: var(--lime); --color-accent-hover: var(--lime-bright); --color-accent-fg: var(--black); /* RULE — lime as ink. Lime never outlines or colours a glyph on a light ground (1.2:1). An icon, an arrow or a hairline that is "accent coloured" uses --color-accent-ink: the text colour on white, lime on dark and on the black panels. Lime on white is always a FILL (button, chip, disc, triangle) with black on top. */ --color-accent-ink: var(--black); --color-error: #B42318; /* form errors only — WCAG AA on white */ --color-error-bg: #FEF3F2; --color-accent-2: var(--aqua); --color-accent-3: var(--slate); --color-link: var(--black); --color-link-hover: var(--black); --color-link-underline: var(--lime); /* Glass (header pill, floating surfaces) */ --glass-bg: rgb(255 255 255 / 0.72); --glass-border: rgb(0 0 0 / 0.08); --glass-blur: 18px; /* Feedback / states */ --color-focus-ring: var(--black); --color-selection-bg: var(--lime); --color-selection-fg: var(--black); --color-ok: var(--aqua); --color-warn: #E0A400; --color-bad: #E5484D; } /* ---------------------------------------------------------------- 3. DARK THEME — explicit attribute wins; OS preference applies only while no attribute is set (the head script normally sets one before first paint, so this is a no-JS fallback). ---------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --color-bg: var(--black); --color-bg-subtle: var(--black); /* Dark mode gets a real raised step — 5 % white was invisible on a Full-HD laptop; bubbles keep a hairline on top of it. */ --color-bg-muted: rgb(255 255 255 / 0.06); --color-bg-raised: rgb(255 255 255 / 0.10); --color-bg-inset: var(--black); --color-bg-alt: #0F1114; /* cool-tinted step for alternating bands */ --color-panel: var(--black); --color-text: var(--white); --color-text-muted: var(--paper-85); --color-text-subtle: var(--paper-70); --color-text-on-accent: var(--black); --color-text-on-panel: var(--white); --color-text-on-panel-muted: var(--paper-85); --color-border: rgb(255 255 255 / 0.14); --color-border-strong: rgb(255 255 255 / 0.26); --color-accent: var(--lime); --color-accent-hover: var(--lime-bright); --color-accent-fg: var(--black); --color-accent-ink: var(--lime); --color-error: #FDA29B; --color-error-bg: color-mix(in oklab, #F04438 18%, transparent); --color-link: var(--white); --color-link-hover: var(--lime); --color-link-underline: var(--lime); --glass-bg: rgb(0 0 0 / 0.62); --glass-border: rgb(255 255 255 / 0.12); --color-focus-ring: var(--lime); --color-selection-bg: var(--lime); --color-selection-fg: var(--black); --hover-border: var(--color-border-strong); /* the shadow carries the highlight, see :root */ } /* No prefers-color-scheme fallback on purpose (2026-09-14): light is the default; dark is a choice made with the toggle (head.php + theme.js). */ /* ---------------------------------------------------------------- 4. REDUCED MOTION — collapse durations so transitions still "complete" instantly; components also switch off keyframe animations under the same query. ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-normal: 1ms; --duration-slow: 1ms; --duration-reveal: 1ms; } } /* ---------------------------------------------------------------- 5. WEB FONTS — self-hosted, SIL OFL 1.1 (LICENSE-AtkinsonHyperlegible.txt) Atkinson Hyperlegible Next (sans) + Mono, latin + latin-ext. Inter Variable kept as the fallback face (LICENSE-Inter.txt). ---------------------------------------------------------------- */ @font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/AtkinsonHyperlegibleNext-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/AtkinsonHyperlegibleNext-Variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/AtkinsonHyperlegibleNext-Variable-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/AtkinsonHyperlegibleNext-Variable-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/AtkinsonHyperlegibleMono-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/AtkinsonHyperlegibleMono-Variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter Variable — fallback face */ @font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Inter-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Inter-Variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } } /* ------------------------------------------------------------------------ Lime switcher (staging only). The FOUC guard in head.php sets the attribute before first paint; lime.js keeps it in sync with the popover. ------------------------------------------------------------------------ */ @layer tokens { :root[data-lime="original"] { --lime: var(--lime-original); } } /* ------------------------------------------------------------------------ Look switch (review tool, 2026-10-06): `soft` borrows the first baiond draft's calmer surface — a warm off-white ground with white cards on it, near-black ink, soft hairlines, and real (soft) shadows for separation instead of black lines + the lime offset shadow. The dark scheme has its own soft set (2026-10-07, second block). Soft is the DEFAULT since 2026-10-06 (operator); the review switch "Look: Crisp" (`data-look="crisp"`) brings the old surface back — to retire crisp for good, fold this block into :root above. The component side (white card surfaces, glass header, panel shadow) is in sections.css § Look: soft and nav.css § 1. ------------------------------------------------------------------------ */ @layer tokens { :root:not([data-look="crisp"]):not([data-theme="dark"]) { --color-bg: #FBFBFA; --color-bg-subtle: #FBFBFA; --color-bg-muted: #F2F2F0; --color-bg-raised: var(--white); --color-bg-inset: var(--white); --color-text: #101110; --color-text-muted: #45463F; /* one step darker for reading (2026-10-08, was #55564F) */ --color-text-subtle: #5F6059; /* was #6E6F68 */ --color-border: rgb(16 17 16 / 0.12); --color-border-strong: rgb(16 17 16 / 0.22); --shadow-sm: 0 1px 2px 0 rgb(16 17 16 / 0.06); --shadow-md: 0 4px 14px -4px rgb(16 17 16 / 0.10); --shadow-lg: 0 18px 44px -16px rgb(16 17 16 / 0.16); --shadow-xl: 0 40px 90px -30px rgb(16 17 16 / 0.24); /* Hover: the line darkens a step, a soft lift instead of the offset. */ --hover-border: rgb(16 17 16 / 0.32); --hover-shadow: var(--shadow-lg); --hover-shadow-sm: var(--shadow-md); /* Cards: soft line + soft shadow at rest, a deeper shadow when lifted; a 1 px lime hairline in the lift keeps the brand in the moment. */ --card-border: var(--color-border); --card-shadow: var(--shadow-sm), var(--shadow-md); --card-shadow-lift: 0 0 0 1px var(--lime-deep), var(--shadow-lg); --card-lift: 0 -3px; --glass-bg: rgb(251 251 250 / 0.72); --glass-border: rgb(16 17 16 / 0.09); } /* Soft in the dark scheme (2026-10-07): the same idea on a near-black ground — opaque raised cards instead of 10 % white, hairlines at 9 % white instead of the strong line + lime offset, deep black shadows, the lime hairline only in the lift. Black panels sit a step below the ground and keep their hairline (components.css § 1). */ :root[data-theme="dark"]:not([data-look="crisp"]) { --color-bg: #0C0D0C; --color-bg-subtle: #0C0D0C; --color-bg-muted: #161716; --color-bg-raised: #171817; --color-bg-inset: #0C0D0C; --color-bg-alt: #111311; --color-border: rgb(255 255 255 / 0.09); --color-border-strong: rgb(255 255 255 / 0.18); --color-border-on-panel: rgb(255 255 255 / 0.10); --color-border-on-panel-strong: rgb(255 255 255 / 0.20); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5); --shadow-md: 0 6px 18px -6px rgb(0 0 0 / 0.65); --shadow-lg: 0 22px 50px -18px rgb(0 0 0 / 0.8); --shadow-xl: 0 40px 90px -30px rgb(0 0 0 / 0.9); --hover-border: rgb(255 255 255 / 0.26); --hover-shadow: var(--shadow-lg); --hover-shadow-sm: var(--shadow-md); --card-border: var(--color-border); --card-shadow: var(--shadow-sm), var(--shadow-md); --card-shadow-lift: 0 0 0 1px rgb(219 249 54 / 0.55), var(--shadow-lg); --card-lift: 0 -3px; --glass-bg: rgb(12 13 12 / 0.72); --glass-border: rgb(255 255 255 / 0.08); } }