/* tokens.css - the ONLY file on this site permitted a colour literal. * * Values are the dashboard's (dashboard-rypt-dev/src/styles/tokens.css), so the two * surfaces match. One difference, on purpose: the dashboard is dark by default, and the * marketing site follows the visitor's system setting. Bare :root is light; dark applies * under prefers-color-scheme, and an explicit data-theme on wins either way. * * L1 --c-* raw brand values, restated per theme. Never referenced outside this file. * L2 the semantic map. The only tokens site.css may spell. * * SEAL IS NEVER INTERACTIVE. It appears in exactly three places on this site: the mark's * tile, the short masthead rule over a page title, and the terminal's "$" prompt sigil * (a decision carried over from the encrypt-terminal component). Never a button, a link, * a focus ring, a border on a control, or a status. scripts/check.mjs enforces the list. * * BRASS marks paid capability (software and hsm tiers) and nothing else, not even in the * terminal. * * One token deliberately differs from the dashboard: --bg-hover mixes into paper, not * surface, because this site's secondary button sits on the page ground. */ /* ---------- fonts: self-hosted, latin subset, only the weights in use ---------- */ @font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-franklin-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/libre-franklin-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/libre-franklin-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-franklin-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } /* ---------- L1: light (the base) ---------- */ :root { color-scheme: light; --c-paper: #f3f2ef; --c-surface: #fff; --c-sunken: #eae8e4; --c-ink: #14181f; --c-ink-2: #4b5058; --c-ink-3: #6b6f77; --c-ink-4: #6f7379; /* disabled label only */ --c-rule: #d9d6d0; --c-rule-2: #bfbbb3; --c-seal: #8a2b3a; --c-brass: #836428; --c-ok: #2e6a50; --c-on-fill: #fff; --c-shadow: 20 24 31; /* The terminal is a single-look component: the same dark in both themes. */ --c-t-bg: #0b0e13; --c-t-chrome: #151a21; --c-t-rule: #262c35; --c-t-fg: #e4e2de; --c-t-dim: #7e858f; --c-t-seal: #d97f89; --c-t-ok: #6fbf95; } /* ---------- L1: dark, for a dark system setting ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-paper: #101319; --c-surface: #181c23; --c-sunken: #0b0e13; --c-ink: #eceae6; --c-ink-2: #aab0b9; --c-ink-3: #868c95; --c-ink-4: #767b83; --c-rule: #2a2f38; --c-rule-2: #3c424c; --c-seal: #d97f89; --c-brass: #c9a662; --c-ok: #6fbf95; --c-on-fill: #101319; --c-shadow: 0 0 0; --c-t-chrome: #161b22; --c-t-rule: #2c333d; } } /* ---------- L1: dark, when chosen explicitly ---------- */ :root[data-theme="dark"] { color-scheme: dark; --c-paper: #101319; --c-surface: #181c23; --c-sunken: #0b0e13; --c-ink: #eceae6; --c-ink-2: #aab0b9; --c-ink-3: #868c95; --c-ink-4: #767b83; --c-rule: #2a2f38; --c-rule-2: #3c424c; --c-seal: #d97f89; --c-brass: #c9a662; --c-ok: #6fbf95; --c-on-fill: #101319; --c-shadow: 0 0 0; --c-t-chrome: #161b22; --c-t-rule: #2c333d; } /* ---------- L2: the semantic map ---------- */ :root { --bg-page: var(--c-paper); --bg-surface: var(--c-surface); --bg-sunken: var(--c-sunken); --text: var(--c-ink); --text-muted: var(--c-ink-2); --text-subtle: var(--c-ink-3); /* never on --bg-sunken: 4.12:1 there */ --text-disabled: var(--c-ink-4); --border: var(--c-rule); /* decorative separators only */ --border-strong: var(--c-rule-2); --border-control: var(--c-ink-3); /* every control boundary */ /* interaction: INK, never seal */ --interactive: var(--c-ink); --interactive-hover: color-mix(in srgb, var(--c-ink) 88%, var(--c-paper)); --interactive-text: var(--c-on-fill); --bg-hover: color-mix(in srgb, var(--c-ink) 5%, var(--c-paper)); --accent-seal: var(--c-seal); /* mark tile and masthead rule only */ --paid-brass: var(--c-brass); /* software and hsm tiers, overage. Never decorative. */ --status-ok: var(--c-ok); --focus-ring: var(--interactive); --shadow-term: 0 1px 2px rgb(var(--c-shadow) / 18%), 0 18px 40px -22px rgb(var(--c-shadow) / 55%); --term-bg: var(--c-t-bg); --term-chrome: var(--c-t-chrome); --term-rule: var(--c-t-rule); --term-fg: var(--c-t-fg); --term-dim: var(--c-t-dim); --term-sigil: var(--c-t-seal); /* the prompt sigil: brand, not interface */ --term-ok: var(--c-t-ok); --font-sans: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; --font-serif: "Source Serif 4", georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", menlo, consolas, monospace; --step-n2: 0.75rem; --step-n1: clamp(0.8125rem, 0.8rem + 0.08vw, 0.875rem); --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.03rem); --step-1: clamp(1.12rem, 1.05rem + 0.3vw, 1.3rem); --step-2: clamp(1.4rem, 1.28rem + 0.5vw, 1.7rem); --step-3: clamp(2.1rem, 1.6rem + 2vw, 3.3rem); --track-display: -0.035em; --track-heading: -0.02em; --track-label: 0.09em; --measure: 66ch; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --page-max: 1120px; --gutter: 20px; --dur: 120ms; }