/* ================================================================ Agentic Frontier — design tokens ---------------------------------------------------------------- One theme. A white page, black ink, one electric blue for primary actions, and full-bleed colour bands (blue, pink, green, black) that hold the product. Product screen replicas carry their own dark palette in css/product.css and never read these. Rules: - No colour literal outside this file except inside css/product.css and the always-coloured bands' own inline text colours. - Verdict colours are the product's own and stay semantic. ================================================================ */ :root { --radius: 18px; --radius-sm: 12px; --radius-xs: 8px; --font-display: "TWK Lausanne", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "TWK Lausanne", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --ease-dramatic: cubic-bezier(0.77, 0, 0.175, 1); --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --nav-h: 56px; /* ---- Page ---- THE AGENTIC FRONTIER PALETTE. This block is the whole of it; if a colour is not derived from something here, it does not belong on the site. See the "Palette" section of README.md for the roles. Arcade White #edebe2 the page ground Agentic Navy #0a1a31 the accent, and the band it carries Ghostlands Coal #113c42 the ink, and the dark band Pink Drink #e9b8de the light band Dull Yellow #eedc5b the highlight Romanov Mauve #b97da8 the third card, and the hero's lift Pure White #ffffff panels, and the closing band Night #08090b the hero sky, and nowhere else Martian Green #136c51 SEMANTIC ONLY: a good outcome The page ground is the warm off-white so panels can be pure white and still read as raised. Everything else below is a tint or shade of one of the above. */ color-scheme: light; --void: #edebe2; /* Arcade White */ --ground-1: #e8e6dc; --ground-2: #e2e0d5; --ground-3: #d8d5c9; --panel: #ffffff; --panel-2: #f7f6f1; --line: #d3d0c4; --line-soft: #e2e0d5; --line-strong: #bfbcae; --ink: #113c42; /* Ghostlands Coal, 10.1:1 on the ground */ --ink-soft: #2e5a60; /* 6.4:1 */ --ink-faint: #456b70; /* 4.9:1 */ --ink-dim: #86a4a7; /* display sizes only */ /* For the light bands: Mauve needs a darker ink than Coal to clear AA. */ --ink-deep: #0a2226; /* Washes (hover, active segment, selection) derive from this. */ --beam: #113c42; --beam-rgb: 17, 60, 66; --on-ink: #edebe2; /* The one accent: the brand's own navy, white text at 17.4:1. It is already very dark, so the hover lightens rather than deepens. */ --accent: #0a1a31; --accent-hover: #16294a; --on-accent: #ffffff; --accent-soft: #e2e6ee; /* Bands. Two dark grounds take white text; the three light ones take ink, and Mauve takes --ink-deep because Coal on Mauve is only 3.8:1. */ --band-coal: #113c42; /* Ghostlands Coal, white at 12.0:1 */ --band-navy: #0a1a31; /* the accent, and the band it carries */ --band-pink: #e9b8de; /* Pink Drink, ink at 7.1:1 */ --band-yellow: #eedc5b; /* Dull Yellow, ink at 8.6:1 */ --band-mauve: #b97da8; /* Romanov Mauve, --ink-deep at 5.2:1 */ /* The hero's own near-black. Outside the six on purpose: the galaxy needs a true night for the stars to carry. */ --band-black: #08090b; --band: var(--band-coal); /* The bright highlight, for emphasis on the two dark grounds. */ --highlight: #eedc5b; /* Semantic, not brand: a good outcome is green even when the accent is not. This is the only place Martian Green still lives. */ --pos: #136c51; --neg: #bf3d28; --seg-token: #4338ca; --seg-review: #d18b12; --seg-maint: #17a39a; --seg-bpo: #b5b5b5; --shadow-card: 0 24px 60px rgba(17, 60, 66, 0.12), 0 2px 6px rgba(17, 60, 66, 0.06); --shadow-modal: 0 40px 100px rgba(17, 60, 66, 0.3), 0 2px 8px rgba(17, 60, 66, 0.12); --shadow-lift: 0 10px 26px rgba(17, 60, 66, 0.18); --shadow-screen: 0 30px 80px rgba(17, 60, 66, 0.4); --nav-bg: rgba(237, 235, 226, 0.86); --nav-bg-solid: #edebe2; --backdrop: rgba(17, 60, 66, 0.62); /* ---- Verdict semantics (shared; the app's own palette) ---- */ --v-automate: #1c7a48; --v-automate-ink: #ffffff; --v-pilot: #a97f1c; --v-pilot-ink: #ffffff; --v-marginal: #2c5c8a; --v-marginal-ink: #ffffff; --v-skip: #bf3d28; --v-skip-ink: #ffffff; --v-directional: #5a6478; --v-automate-rgb: 28, 122, 72; /* Bright verdicts, for the dark surfaces that carry them (the hero field, the problem card). Same meanings, legible on near-black. */ --vb-automate: #5fd38d; --vb-pilot: #f0c65a; --vb-marginal: #6f95f0; --vb-skip: #ef7a70; /* Pilot as a solid card: gold cannot carry white text at AA, so the card is the brighter gold the product uses in the dark, with the dark ink that goes with it. Every other verdict clears AA on white. */ --v-pilot-card: #dcae2e; --v-pilot-card-ink: #33260a; } /* ================================================================ Fonts ---------------------------------------------------------------- TWK Lausanne is a licensed typeface (Weltkern) and is not shipped in this repo. Drop the licensed woff2 files into assets/fonts/ with the names below and every page picks them up; until then the stack falls through to Inter from Google Fonts, the closest open face. ================================================================ */ @font-face { font-family: "TWK Lausanne"; font-weight: 300; font-style: normal; font-display: swap; src: url("../assets/fonts/TWKLausanne-300.woff2") format("woff2"); } @font-face { font-family: "TWK Lausanne"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/TWKLausanne-400.woff2") format("woff2"); } @font-face { font-family: "TWK Lausanne"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/TWKLausanne-500.woff2") format("woff2"); } @font-face { font-family: "TWK Lausanne"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/TWKLausanne-600.woff2") format("woff2"); }