/* 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 on Canvas (5.0:1) */ --bef-ash: #A79C89; /* Ash — placeholder, disabled */ --bef-hairline: #D5D0C0; /* Hairline — borders, rule lines (decorative) */ --bef-hairline-strong: #B6AE9B; --bef-control-border: #9A907D; /* form inputs & non-text UI — AA non-text (3.3:1) */ /* ── 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 */ /* ── 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-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-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; /* ── 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; } /* 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"]) { --bef-canvas: #15110D; --bef-canvas-raised: #1F1A14; --bef-canvas-sunk: #0E0B08; --bef-mist: #2A241D; --bef-ink: #ECE3D1; --bef-graphite: #B9AE99; --bef-stone: #8A7F6C; --bef-ash: #5A5145; --bef-hairline: #2E281F; --bef-hairline-strong: #443C30; --bef-control-border: #5A5145; --bef-ember: #C4564A; --bef-ember-deep: #8A2F26; --bef-ember-tint: #3A1612; --bef-honey: #D4A26B; --bef-honey-deep: #A87A4B; --bef-honey-tint: #3A2A18; --bef-moss: #7A9078; --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%; --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"] { --bef-canvas: #15110D; --bef-canvas-raised: #1F1A14; --bef-canvas-sunk: #0E0B08; --bef-mist: #2A241D; --bef-ink: #ECE3D1; --bef-graphite: #B9AE99; --bef-stone: #8A7F6C; --bef-ash: #5A5145; --bef-hairline: #2E281F; --bef-hairline-strong: #443C30; --bef-control-border: #5A5145; --bef-ember: #C4564A; --bef-ember-deep: #8A2F26; --bef-ember-tint: #3A1612; --bef-honey: #D4A26B; --bef-honey-deep: #A87A4B; --bef-honey-tint: #3A2A18; --bef-moss: #7A9078; --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%; --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. `