/* ============================================================================ Bivy — design tokens ("calm" direction) Single source of truth for the marketing site AND the app. Editorial, near-monochrome, one accent used sparingly. Serif display · mono chrome · sans body. Mountain-inspired alpine palette. Tuned for light + dark. Consumers reference the SEMANTIC tokens only (never raw hexes), so both surfaces stay in sync. To port to the React app, translate this block into its theme system (CSS vars / Tailwind theme) verbatim. Theme resolution: follows the OS via prefers-color-scheme, and can be forced with [data-theme="light"|"dark"] on for an in-app toggle. ============================================================================ */ /* --- self-hosted display serif (OFL-1.1, latin subset, variable) --- */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("./fonts/newsreader-roman.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("./fonts/newsreader-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light dark; /* type roles */ --serif: "Newsreader", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* layout */ --max: 1080px; --prose: 660px; } /* ---------------------------------------------------------------- light --- */ :root, :root[data-theme="light"] { /* surfaces — warm paper */ --bg: #f5f3ee; --surface: #faf8f3; --surface-2: #ffffff; /* ink */ --ink: #191a16; /* 15.8:1 on --bg */ --ink-2: #43453d; /* 9.0:1 on --bg */ --muted: #74766c; /* 4.6:1 on --bg — AA body */ --faint: #83857a; /* 3.7:1 — AA large / non-text only */ --line: #e4e1d8; --line-soft: #edeae2; /* accent — alpine slate-blue, used sparingly (links, focus, one CTA) */ --accent: #3f6377; /* 5.2:1 on --bg — AA link text */ --accent-2: #324f60; --accent-wash: color-mix(in srgb, var(--accent) 7%, var(--surface)); /* inverted primary button (ink on paper) */ --btn-bg: #191a16; --btn-ink: #f5f3ee; /* status semantics (kept desaturated) */ --status-run: var(--accent); /* running / active */ --status-attention: #a76a63; /* needs you / approval */ --status-ok: #5b7d63; /* done / merged / passed */ --status-idle: var(--faint); /* idle / paused */ /* diffs */ --add: #4f7a5c; --del: #a76a63; /* incidental */ --grid: color-mix(in srgb, var(--ink) 4%, transparent); --shadow: 0 1px 2px rgba(24, 20, 12, .04); } /* ----------------------------------------------------------------- dark --- */ @media (prefers-color-scheme: dark) { :root { /* surfaces — cool alpine dusk (soft graphite, NOT near-black) */ --bg: #14171a; --surface: #191d21; --surface-2: #1f242a; /* ink — slightly cool, lower contrast for calm */ --ink: #e6ebee; /* 14.0:1 on --bg */ --ink-2: #b7bfc5; /* 8.6:1 on --bg */ --muted: #838b91; /* 4.7:1 on --bg — AA body */ --faint: #626a70; /* 3.0:1 — large / non-text only */ --line: #262c31; --line-soft: #1d2226; /* accent — glacier blue (a lighter step of the same hue) */ --accent: #8fb6cd; /* 7.2:1 on --bg — AA link text */ --accent-2: #a7cadd; --accent-wash: color-mix(in srgb, var(--accent) 10%, var(--surface)); --btn-bg: #e6ebee; --btn-ink: #14171a; --status-run: var(--accent); --status-attention: #c08a83; --status-ok: #86a99f; --status-idle: var(--faint); --add: #7fa98a; --del: #c08a83; --grid: color-mix(in srgb, var(--ink) 3.2%, transparent); --shadow: none; } } /* explicit override (in-app toggle) — mirrors the dark block */ :root[data-theme="dark"] { --bg: #14171a; --surface: #191d21; --surface-2: #1f242a; --ink: #e6ebee; --ink-2: #b7bfc5; --muted: #838b91; --faint: #626a70; --line: #262c31; --line-soft: #1d2226; --accent: #8fb6cd; --accent-2: #a7cadd; --accent-wash: color-mix(in srgb, var(--accent) 10%, var(--surface)); --btn-bg: #e6ebee; --btn-ink: #14171a; --status-run: var(--accent); --status-attention: #c08a83; --status-ok: #86a99f; --status-idle: var(--faint); --add: #7fa98a; --del: #c08a83; --grid: color-mix(in srgb, var(--ink) 3.2%, transparent); --shadow: none; } /* --- global, token-driven primitives shared by every page --- */ ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }