/* ============================================================================ TOKENS ---------------------------------------------------------------------------- Two tiers, one direction: PRIMITIVE -> SEMANTIC. Nothing flows back. Tier 1 (primitives) are raw values. They describe what a colour IS. Never reference them from a component: they exist only to feed Tier 2. Tier 2 (semantic) describes what a value is FOR. Components read these, and only these. There is deliberately no third "component tier". That layer exists to support multi-brand and white-label theming; this is one site with one brand, so it would be structure you maintain forever and never use. Single theme: black. There is no light mode to keep in sync. ========================================================================== */ /* ============================================================================ TIER 1. PRIMITIVES ========================================================================== */ :root { /* --- Neutrals ----------------------------------------------------------- Not neutral grey. Every step carries a ~2% warm bias at the same hue as the accent, so the greys read as the yellow's family rather than as an unrelated scale. Saturation stays low enough that the accent still does all the shouting. */ --neutral-950: #0D0D0C; --neutral-900: #141412; --neutral-850: #1C1C19; --neutral-800: #24241F; --neutral-750: #262622; --neutral-700: #33332D; /* The dark end of the scale is compressed: every step from 950 to 700 lands under 1.6:1 against the panel, which is enough for a hairline inside a component but not for a frame that has to hold a whole row together. This step exists for that job. */ --neutral-650: #4E4E48; --neutral-500: #6E6E64; --neutral-400: #7C7C74; --neutral-300: #9C9C92; --neutral-200: #C6C6BB; --neutral-050: #F5F5F0; /* --- Bone --------------------------------------------------------------- The light surface. Shares the accent's hue at very low saturation, so it never reads as a foreign white the way #FFFFFF does. */ --bone-000: #F7FAF1; /* raised surfaces on the bone page */ --bone-050: #E8EFD8; /* the page */ --bone-100: #DEE7C8; --bone-150: #D2E0B2; --bone-200: #C9D7AA; --bone-300: #B1C18C; --bone-600: #666E55; --bone-700: #585E4A; --bone-800: #404437; --bone-900: #131410; /* --- Yellow ------------------------------------------------------------- 400 is the accent. 300 and 500 are its hover and pressed states. 700 and 800 are darkened for use as TEXT, where the bright yellow cannot go: it is 1.1:1 on bone. */ --yellow-300: #FFF04D; --yellow-400: #FFE800; --yellow-500: #E6D100; --yellow-700: #8A7D00; --yellow-800: #6E6300; /* --- Support ------------------------------------------------------------ Only for form validation. Nothing else on the site signals state. */ --red-400: #FF6B6B; --green-400: #6BE39A; /* --- Type --------------------------------------------------------------- Bricolage carries the display voice; Plex Sans reads; Plex Mono labels. */ --family-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --family-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --family-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* 1.25 major-third scale. The two largest are fluid. */ --size-100: 0.6875rem; /* 11px, eyebrows, mono labels */ --size-200: 0.75rem; /* 12px, meta, captions */ --size-300: 0.8125rem; /* 13px, small UI, tags */ --size-400: 0.9375rem; /* 15px, body, button label */ --size-500: 1.0625rem; /* 17px, lead paragraphs */ --size-600: 1.3125rem; /* 21px, h4 */ --size-700: 1.625rem; /* 26px, h3 */ --size-800: clamp(1.75rem, 3.5vw, 2.25rem); /* h2, page titles */ --size-900: clamp(2.25rem, 7vw, 4rem); /* h1, hero */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --leading-flat: 1.02; --leading-tight: 1.18; --leading-snug: 1.4; --leading-body: 1.7; --tracking-tight: -0.035em; --tracking-snug: -0.02em; --tracking-wide: 0.16em; /* --- Space -------------------------------------------------------------- One 4px-based scale for everything: components, patterns and layout. Do not add new steps, combine existing ones instead. */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ /* --- Radius ------------------------------------------------------------- The button radius is expressed as a RATIO, not a fixed pixel value. A radius becomes a pill the moment it reaches half the element's height, so a fixed 29px stays a squircle at 72px tall and snaps to a pill at 47px. Scaling by height is what keeps the shape identical at every size. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px; --radius-button-ratio: 0.4; /* radius = 40% of button height */ /* --- Controls ----------------------------------------------------------- One height shared by every control in the header, so the language switch and the Menu button cannot drift apart. */ --control-height: 2rem; /* 32px */ /* --- Border ------------------------------------------------------------- */ --stroke-thin: 1px; --stroke-thick: 1.5px; /* --- Motion ------------------------------------------------------------- */ --duration-instant: 90ms; --duration-fast: 140ms; --duration-base: 220ms; --duration-slow: 420ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* A spring-like curve with a small overshoot, standing in for the physics spring the original navbar used. */ --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* --- Layout ------------------------------------------------------------- */ --width-max: 72rem; --width-text: 36rem; /* ~65 characters at body size */ --width-narrow: 46rem; --gutter: clamp(1.25rem, 5vw, 3rem); /* --- Depth -------------------------------------------------------------- Shadows barely read on black, so elevation is carried by surface value and border instead. These exist only for the one case that needs to float above the page. */ --layer-base: 0; --layer-sticky: 50; --layer-overlay: 100; } /* ============================================================================ TIER 2 - SEMANTIC These are what components read. The site is LIGHT. Because components only ever read this layer, flipping the theme is this block and nothing else. ========================================================================== */ :root { /* --- Surfaces ----------------------------------------------------------- Bone is the page itself now, not a panel laid on top of one. */ --color-page: var(--bone-050); /* #E8EFD8 */ --color-surface: var(--bone-000); /* cards, insets */ --color-raised: var(--bone-100); /* hover on a card */ --color-sunken: var(--bone-150); /* pressed, active row */ /* --- Lines -------------------------------------------------------------- --color-line is decoration at 1.3:1 and is NOT legal as the only cue on something interactive. WCAG 1.4.11 wants 3:1, which is what --color-line-interactive is for, at 4.5:1. */ --color-line: var(--bone-200); --color-line-strong: var(--bone-300); --color-line-interactive: var(--bone-600); /* --- Text --------------------------------------------------------------- */ --color-text: var(--bone-900); /* 15.7:1 AAA */ --color-text-body: var(--bone-800); /* 8.5:1 AAA */ --color-text-muted: var(--bone-700); /* 5.7:1 AA */ --color-text-dim: var(--bone-600); /* 4.5:1 AA */ /* --- Accent ------------------------------------------------------------- The neon works as a FILL with dark ink on it, at 14.8:1. It does not work as text on the page: 1.1:1. So fills and links are separate tokens now, which they did not need to be on a dark page. */ --color-accent: var(--yellow-400); /* fills only */ --color-accent-hover: var(--yellow-300); --color-accent-active: var(--yellow-500); --color-link: var(--yellow-800); /* 5.2:1 - text and links */ --color-link-hover: var(--bone-900); --color-accent-quiet: var(--yellow-800); --color-on-accent: var(--bone-900); /* 14.8:1 on the fill */ --color-accent-wash: rgba(255, 232, 0, 0.18); /* --- The contrasting panel ---------------------------------------------- On a light page the panel that stands apart is the dark one. The tokens are named for the job, not the colour, so the components did not change. */ --color-panel: var(--neutral-950); /* 16.5:1 out of the page */ --color-panel-text: var(--neutral-050); /* 17.8:1 AAA */ --color-panel-body: var(--neutral-200); /* 11.3:1 AAA */ --color-panel-muted: var(--neutral-300); /* 7.0:1 AAA */ --color-panel-dim: var(--neutral-400); /* 4.6:1 AA */ --color-panel-line: var(--neutral-750); --color-panel-frame: var(--neutral-650); /* 2.3:1 on the panel */ --color-panel-wash: rgba(245, 245, 240, 0.08); --color-accent-on-panel: var(--yellow-400); /* 15.6:1 on the panel */ /* --- Feedback ------------------------------------------------------------ */ --color-danger: #B3261E; --color-success: #1F6B4A; /* --- Focus -------------------------------------------------------------- The neon is 1.1:1 on this page, so the ring is the ink with a neon inner line. On the dark panel it is the other way round. */ --color-focus: var(--bone-900); --focus-ring: 0 0 0 2px var(--color-page), 0 0 0 4px var(--color-focus); --focus-ring-on-panel: 0 0 0 2px var(--color-panel), 0 0 0 4px var(--color-accent); /* --- Selection ---------------------------------------------------------- */ --color-selection: var(--yellow-400); --color-selection-text: var(--bone-900); /* --- Vertical rhythm ---------------------------------------------------- */ --section-gap: clamp(var(--space-9), 9vw, var(--space-10)); }