/* Befora — Design Tokens Modern creator studio for makers, DIYers, and hobbyists. Photo-first, quiet, gets out of the way. */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* * IMPORTANT: any palette change here must be mirrored into * `web/themes/custom/befora/templates/layout/maintenance-page.html.twig`, * which inlines these token values inside its own \3c style> block (because * Drupal libraries are not available during maintenance / bootstrap failure). */ :root { /* ── Surfaces — Canvas (light) ──────────────────────────────── Neutral cream — warmth comes from yellow undertone (hue ≈ 85), never red. Low chroma so Ember accents pop instead of muddying. CSS variable names keep `--bef-canvas*` for stability; the design canvas refers to these as "Canvas" (light) and "Studio" (dark). */ --bef-canvas: #F2F0E9; /* Canvas — primary surface, neutral cream */ --bef-canvas-raised: #FAF8F2; /* Canvas · Raised — cards, lifted blocks */ --bef-canvas-sunk: #E9E5DA; /* Canvas · Sunk — wells, code, inset */ --bef-mist: #DFDBCD; /* Mist — divider blocks, subtle bg */ /* ── Ink (text on Canvas) ──────────────────────────────── */ --bef-ink: #1B1814; /* Ink — primary text */ --bef-graphite: #494238; /* Graphite — secondary text */ --bef-stone: #6F6557; /* Stone — tertiary, captions — AA light: 5.31:1 raised, 5.05:1 canvas */ --bef-ash: #918471; /* Ash — placeholder, disabled — #473: 3.21:1 canvas, 3.44:1 raised (was #A79C89 at 2.37/2.55, failed) */ --bef-hairline: #D5D0C0; /* Hairline — borders, rule lines (decorative) */ --bef-hairline-strong: #B6AE9B; --bef-control-border: #8A7D6A; /* form inputs & non-text UI — #473: 3.53:1 canvas, 3.79:1 raised (was #9A907D at 2.77/2.97, failed) */ /* ── Primary signature — Ember ───────────────────────── */ --bef-ember: #6B2520; /* Ember — the brand, warm oxblood / iron-stain */ --bef-ember-deep: #4D1815; /* Ember · Deep — pressed, deep-press states */ --bef-ember-tint: #ECDFD5; /* Ember · Tint — bg behind primary text/badges */ --bef-ember-text: #6B2520; /* Ember · Text — ember TEXT/ICON on Canvas or on Ember · Tint. Light: same value as --bef-ember (8.60:1 on tint, 11.5:1 on raised). The dark ramp is why the token exists — see the dark blocks. Use --bef-ember for fills, borders, rules, dots. */ --bef-ember-on-ink: #D06E62; /* #553 — ember TEXT/ICON on a surface painted with --bef-ink. That chrome (the CKEditor balloon and its toolbars) inverts between themes: dark card in light, near-white card in dark. Brand text that follows the theme therefore moves the WRONG way on it (1.61:1 light, 2.71:1 dark). This token is pinned to the surface instead — light takes the dark ramp's value, 5.13:1 on #1B1814. Never use it on a canvas surface; --bef-ember-text is the token there. */ /* ── Supporting ──────────────────────────────────────── */ --bef-honey: #A87A4B; /* Honey — links, secondary accent */ --bef-honey-deep: #7A5430; /* Honey · Deep */ --bef-honey-tint: #EFE2CE; /* Honey · Tint */ --bef-moss: #2E3D32; /* Moss — deep forest, rare accent */ --bef-moss-tint: #DCE3D8; /* Moss · Tint */ /* ── Semantic ────────────────────────────────────────── */ --bef-posted: #3D5A40; /* Posted (success) — var name kept for stability */ --bef-posted-tint: #DDE6D8; --bef-ochre: #8A5A1F; /* Ochre (warn) */ --bef-ochre-tint: #F1E3CB; --bef-error: var(--bef-ember); /* Ember (error) — reuses primary on purpose */ --bef-error-text: var(--bef-ember-text); /* Error TEXT/ICON. #476: --bef-error is an ALIAS of --bef-ember, so `color: var(--bef-error)` inherits the same sub-AA dark ramp (3.93:1 on raised, 4.46:1 on sunk). Error words use this; error fills, borders and dots keep --bef-error. */ --bef-slate: #3D4A5C; /* Slate (info) — warm-leaning blue-gray */ --bef-slate-tint: #DDE2EA; /* ── Type ────────────────────────────────────────────── */ --bef-display: "Instrument Serif", "GT Sectra Display", georgia, serif; --bef-body: "IBM Plex Sans", -apple-system, "Helvetica Neue", arial, sans-serif; --bef-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", menlo, monospace; /* ── Type scale ──────────────────────────────────────── Numeric naming maps 1:1 to px value, so search/replace is mechanical. Use these tokens — never bake font-size in pixels anywhere in the theme or SDCs. The smallest (--fs-9) is intentionally kept for parity with legacy and deprecated callers; new code should use --fs-13 or larger. */ --fs-9: 9px; --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-21: 21px; --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-28: 28px; --fs-30: 30px; --fs-34: 34px; --fs-36: 36px; --fs-40: 40px; --fs-44: 44px; --fs-48: 48px; --fs-52: 52px; --fs-56: 56px; --fs-64: 64px; --fs-80: 80px; --fs-88: 88px; --fs-92: 92px; --fs-96: 96px; --fs-104: 104px; --fs-108: 108px; /* ── Spacing (4-base) ────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ── Touch targets ──────────────────────────────────── Below the 768px mobile breakpoint every interactive element needs a hit area of at least --touch-min, measured on the hit box, not the visual. An icon button keeps a --touch-visual disc inside a --touch-min button: 4px of transparent padding on every side, with an equal negative margin so the control occupies the same optical space. Adjacent hit areas need 8px between them, which is why icon rows sit at gap: 16 — a 36px disc carries 4px of padding a side, so hit gap = visual gap - 8. Mirrors designs/components/mobile-kit.jsx (TOUCH_MIN / ICON_BTN_VISUAL) and the written standard in designs/components/form-elements.jsx §00. */ --touch-min: 44px; --touch-visual: 36px; --touch-inset: 4px; /* (--touch-min - --touch-visual) / 2 */ /* ── Layout ──────────────────────────────────────────── */ --container-max: 1280px; --container-pad: 56px; --content-narrow: 58ch; --content-default: 72ch; /* ── Radii — restrained, paper-edge ──────────────────── */ --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px; --r-pill: 999px; /* ── Shadows — paper-on-paper ────────────────────────── */ --sh-0: 0 0 0 1px var(--bef-hairline); --sh-1: 0 1px 0 rgb(27 23 20 / 4%), 0 0 0 1px var(--bef-hairline); --sh-2: 0 2px 6px rgb(27 23 20 / 6%), 0 0 0 1px var(--bef-hairline); --sh-3: 0 8px 24px rgb(27 23 20 / 8%), 0 0 0 1px var(--bef-hairline); --sh-press: inset 0 1px 2px rgb(27 23 20 / 8%); /* ── Motion ──────────────────────────────────────────── */ --ease-page: cubic-bezier(.22,.61,.36,1); /* page-turn */ --ease-quiet: cubic-bezier(.4,0,.2,1); /* steady fade */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 360ms; --dur-4: 600ms; /* Tell the UA to draw native widget internals (date pickers, select popups, scrollbars, autofill) for a light surface. The dark blocks below flip this to `dark`. */ color-scheme: light; } /* Dark tokens — "Studio" surface (deep + slightly warm). Applied when the OS prefers dark AND the user has not opted into 'light' via the toggle. Same CSS variable names as light mode; the design canvas refers to this palette as "Studio". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bef-canvas: #15110D; --bef-canvas-raised: #1F1A14; --bef-canvas-sunk: #0E0B08; --bef-mist: #2A241D; --bef-ink: #ECE3D1; --bef-graphite: #B9AE99; --bef-stone: #948873; /* #446 — was #8A7F6C (4.38:1 on raised, failed AA); now 4.96:1 raised, 5.39:1 canvas */ --bef-ash: #746856; /* #473: 3.45:1 canvas, 3.17:1 raised (was #5A5145 at 2.41/2.22, failed) */ --bef-hairline: #2E281F; --bef-hairline-strong: #443C30; --bef-control-border: #776C59; /* #473: 3.64:1 canvas, 3.35:1 raised (was #5A5145 at 2.41/2.22, failed) */ --bef-ember: #C4564A; --bef-ember-deep: #8A2F26; --bef-ember-tint: #3A1612; --bef-ember-text: #D06E62; /* #446 — ember TEXT/ICON in dark. --bef-ember as text was 3.93:1 on raised and 3.67:1 on Ember · Tint, both below AA. This value is 4.67:1 on tint, 5.01:1 on raised, 5.45:1 on canvas. Ember text and ember fills are separate tokens so lifting text contrast does not cost white-on-ember contrast. */ --bef-ember-on-ink: #6B2520; /* #553 — ink-painted chrome is near-white in dark (#ECE3D1), so brand text on it takes the LIGHT ramp's value: 8.62:1. See the light block for why. */ --bef-honey: #D4A26B; --bef-honey-deep: #A87A4B; --bef-honey-tint: #221809; /* #555 — was #3A2A18. The tertiary hover paints --bef-ember-text on this and measured 3.99:1, the one swept site #446's table never covered. Darkened until ember-text clears (5.06:1); it also lifts honey-deep chip text on the tint from 3.64:1 to 4.62:1. */ --bef-moss: #879E85; /* #446 — was #7A9078 (4.32:1 on Moss · Tint, failed AA); now 5.15:1 */ --bef-moss-tint: #1F2A20; --bef-posted: #88A88A; --bef-posted-tint: #1E2A1F; --bef-ochre: #D4A26B; --bef-ochre-tint: #2E2418; --bef-slate: #8FA0B8; --bef-slate-tint: #1A2028; --bef-cover-sat: 14%; --bef-cover-l1: 14%; --bef-cover-l2: 19%; /* The ruled header's band hatch — see the note in the [data-theme] block. */ --bef-band-l1: 14%; --bef-band-l2: 19%; --sh-1: 0 1px 0 rgb(0 0 0 / 40%), 0 0 0 1px var(--bef-hairline); --sh-2: 0 4px 12px rgb(0 0 0 / 50%), 0 0 0 1px var(--bef-hairline); --sh-3: 0 12px 32px rgb(0 0 0 / 55%), 0 0 0 1px var(--bef-hairline); } } /* Manual dark override via [data-theme="dark"] — wins over system. */ :root[data-theme="dark"] { color-scheme: dark; --bef-canvas: #15110D; --bef-canvas-raised: #1F1A14; --bef-canvas-sunk: #0E0B08; --bef-mist: #2A241D; --bef-ink: #ECE3D1; --bef-graphite: #B9AE99; --bef-stone: #948873; /* #446 — was #8A7F6C (4.38:1 on raised, failed AA); now 4.96:1 raised, 5.39:1 canvas */ --bef-ash: #746856; --bef-hairline: #2E281F; --bef-hairline-strong: #443C30; --bef-control-border: #776C59; --bef-ember: #C4564A; --bef-ember-deep: #8A2F26; --bef-ember-tint: #3A1612; --bef-ember-text: #D06E62; /* #446 — ember TEXT/ICON in dark. --bef-ember as text was 3.93:1 on raised and 3.67:1 on Ember · Tint, both below AA. This value is 4.67:1 on tint, 5.01:1 on raised, 5.45:1 on canvas. Ember text and ember fills are separate tokens so lifting text contrast does not cost white-on-ember contrast. */ --bef-ember-on-ink: #6B2520; /* #553 — ink-painted chrome is near-white in dark (#ECE3D1), so brand text on it takes the LIGHT ramp's value: 8.62:1. See the light block for why. */ --bef-honey: #D4A26B; --bef-honey-deep: #A87A4B; --bef-honey-tint: #221809; /* #555 — was #3A2A18. The tertiary hover paints --bef-ember-text on this and measured 3.99:1, the one swept site #446's table never covered. Darkened until ember-text clears (5.06:1); it also lifts honey-deep chip text on the tint from 3.64:1 to 4.62:1. */ --bef-moss: #879E85; /* #446 — was #7A9078 (4.32:1 on Moss · Tint, failed AA); now 5.15:1 */ --bef-moss-tint: #1F2A20; --bef-posted: #88A88A; --bef-posted-tint: #1E2A1F; --bef-ochre: #D4A26B; --bef-ochre-tint: #2E2418; --bef-slate: #8FA0B8; --bef-slate-tint: #1A2028; --bef-cover-sat: 14%; --bef-cover-l1: 14%; --bef-cover-l2: 19%; /* The ruled header's band hatch. Its LIGHT values (76%/68%) are darker than a card's (88%/80%) per the artboard, so it needs its own pair; in dark both land on the same near-black. Light comes from the var() fallback, exactly like --bef-cover-* above. */ --bef-band-l1: 14%; --bef-band-l2: 19%; --sh-1: 0 1px 0 rgb(0 0 0 / 40%), 0 0 0 1px var(--bef-hairline); --sh-2: 0 4px 12px rgb(0 0 0 / 50%), 0 0 0 1px var(--bef-hairline); --sh-3: 0 12px 32px rgb(0 0 0 / 55%), 0 0 0 1px var(--bef-hairline); } /* Studio surface — opt-in dark band for any region that should sit on the Studio palette regardless of the page's light/dark state. Apply alongside a component class (e.g. `