/* ============================================================ akwOS — design tokens THE source. `site.css`, `app.css` and every card under `design/ds/` resolve against this file; nothing re-declares a raw hex. Two tiers, borrowed from the cds architecture the frontend research found (docs/technology-extraction.md, item 1): Tier 1 primitives a ramp per hue. No meaning, just value. Tier 2 semantics what a value is FOR. Re-aliased per theme. Components only ever name a Tier 2 alias, which is why one component stylesheet can serve the dark marketing shell and the light product surface without a second copy of itself. Themes are a data attribute, not a media query: light — the product surface dark — the marketing shell ============================================================ */ :root { /* ── Tier 1 · neutral ramp ──────────────────────────────── One ramp, seventeen steps. It used to be two: the dark shell carried #EDEFF2/#98A1AD/#69727E and the light surface carried #F0F2F5/#98A2B3/#667085 — pairs that differ by 1–3 per channel and read identically. Collapsed on purpose; that near-duplication is exactly the drift this file exists to end. */ --akw-n-0: #FFFFFF; --akw-n-25: #FAFBFC; --akw-n-50: #F6F7F9; --akw-n-75: #F2F4F7; --akw-n-100: #F0F2F5; --akw-n-200: #E6E8EC; --akw-n-300: #D0D5DD; --akw-n-400: #98A2B3; --akw-n-500: #667085; --akw-n-600: #475467; --akw-n-700: #344054; --akw-n-800: #22262D; --akw-n-850: #161A20; --akw-n-900: #111419; --akw-n-925: #0E1116; --akw-n-950: #0B0D10; --akw-n-1000: #08090B; /* Not a ramp step — the physical cutout in a device bezel is true black. Named so nothing outside this file needs a literal. */ --akw-void: #000000; /* Hairlines on a dark ground are translucent, not a ramp step — they must pick up whatever surface sits under them. */ --akw-w-06: rgba(255,255,255,.06); --akw-w-08: rgba(255,255,255,.085); --akw-w-12: rgba(255,255,255,.12); --akw-w-14: rgba(255,255,255,.14); --akw-w-24: rgba(255,255,255,.24); /* ── Tier 1 · hue ramps ─────────────────────────────────── -400 is the step that carries on a dark ground, -500 the one that carries on light: same hue, different lightness, which is why the old file had two values under one name. -100/-700 are the tint pair every badge and pill is built from. */ --akw-violet-25: #EEECFE; --akw-violet-100: #EAE7FE; --akw-violet-400: #7B6CF6; --akw-violet-500: #6E5AF0; --akw-violet-700: #5541D7; --akw-green-25: #EAFBF1; --akw-green-100: #DCFAE6; --akw-green-400: #34B58A; --akw-green-500: #12A67B; --akw-green-700: #067647; --akw-amber-25: #FFFBEF; --akw-amber-100: #FEF0C7; --akw-amber-200: #F5D48A; --akw-amber-400: #E3A93F; --akw-amber-500: #DE9B25; --akw-amber-700: #B54708; --akw-amber-800: #7A5B12; --akw-red-25: #FEF7F6; --akw-red-100: #FEE4E2; --akw-red-400: #F2665A; --akw-red-500: #E0483B; --akw-red-700: #B42318; /* ── Tier 1 · type, radius, motion ──────────────────────── System-first. "Inter" led every stack in this repo and was never loaded from anywhere, so every surface has always rendered in the system face; naming SF first makes the declaration match what the machine actually paints, and keeps the "no external font host" claim in `_headers` true. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-10: 10.2px; --fs-11: 11px; --fs-12: 12.4px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15.5px; --fs-17: 17.5px; --fs-21: 21px; --fs-26: 26px; --r-xs: 5px; --r-sm: 6px; --r: 8px; --r-md: 12px; --r-lg: 14px; --r-xl: 22px; --r-2xl: 30px; --r-full: 999px; --ease: cubic-bezier(.22,.61,.36,1); --wrap: 1200px; --rail: 236px; } /* ============================================================ Tier 2 · semantic aliases The default is LIGHT, because the product surface is the thing this repo is actually building; the marketing shell is the special case and opts in with data-theme="dark". ============================================================ */ :root { --bg: var(--akw-n-50); --bg-sunken: var(--akw-n-75); --surface: var(--akw-n-0); --surface-raised: var(--akw-n-0); --surface-hover: var(--akw-n-50); --surface-inset: var(--akw-n-25); --border: var(--akw-n-200); --border-subtle: var(--akw-n-100); --border-strong: var(--akw-n-300); --text: var(--akw-n-925); --text-body: var(--akw-n-700); --text-muted: var(--akw-n-500); --text-dim: var(--akw-n-400); --text-inverse: var(--akw-n-0); --accent: var(--akw-violet-500); --accent-fg: var(--akw-n-0); --accent-tint: var(--akw-violet-100); --accent-tint-fg: var(--akw-violet-700); --ok: var(--akw-green-500); --ok-tint: var(--akw-green-100); --ok-tint-fg: var(--akw-green-700); --warn: var(--akw-amber-500); --warn-tint: var(--akw-amber-100); --warn-tint-fg: var(--akw-amber-700); --danger: var(--akw-red-500); --danger-tint: var(--akw-red-100); --danger-tint-fg: var(--akw-red-700); /* A wash tints a whole ROW or PANEL, under body text, so unlike a tint it must re-alias per theme — a light wash on a dark ground paints near-white text onto near-white and the row disappears. */ --danger-wash: var(--akw-red-25); --warn-wash: var(--akw-amber-25); --warn-border: var(--akw-amber-200); --warn-wash-fg: var(--akw-amber-800); --neutral-tint: var(--akw-n-75); --neutral-tint-fg: var(--akw-n-500); /* Solid ink — the button/avatar fill that is neither accent nor surface. Flips with the theme so a "solid" control stays solid. */ --solid: var(--akw-n-925); --solid-hover: var(--akw-n-800); --solid-fg: var(--akw-n-0); /* ── Domain accents ─────────────────────────────────────── One hue per surface, so a colour anywhere in the product means exactly one thing. These replace the old --agents/--monitors/ --lists trio, whose names came from Legora's module list rather than from anything in this workspace. */ --domain-knowledge: var(--ok); /* akw-mirrors — the corpus */ --domain-plugins: var(--accent); /* akw-workplace-plugins */ --domain-skills: var(--warn); /* SKILL.md across the repos */ --domain-agents: var(--solid); /* .claude/agents/*.md */ /* ── Evidence grades ────────────────────────────────────── measured > observed > known > inferred, never upgraded. The ladder is the workspace rule; giving it tokens keeps a badge from being coloured by whoever wrote it last. */ --grade-measured: var(--ok-tint); --grade-measured-fg: var(--ok-tint-fg); --grade-observed: var(--accent-tint); --grade-observed-fg: var(--accent-tint-fg); --grade-known: var(--warn-tint); --grade-known-fg: var(--warn-tint-fg); --grade-inferred: var(--neutral-tint); --grade-inferred-fg: var(--neutral-tint-fg); /* ── Provenance tier ────────────────────────────────────── authored = this org wrote it. vendored = it runs here and somebody else wrote it. Six repositories feed the four planes and three are forks measured identical to upstream, so every row carries one of these. Aliased onto existing tints rather than given ramps of their own: a tier is an emphasis, not a new colour, and the tints are already re-aliased per `data-theme` — so these two lines serve light and dark with no override, which is the rule ui.css is built on. */ --tier-authored: var(--accent-tint); --tier-authored-fg: var(--accent-tint-fg); --tier-vendored: var(--neutral-tint); --tier-vendored-fg: var(--neutral-tint-fg); --shadow-sm: 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 2px 6px rgba(16,24,40,.06); --shadow-lg: 0 40px 80px -34px rgba(0,0,0,.35); } [data-theme="dark"] { --bg: var(--akw-n-1000); --bg-sunken: var(--akw-n-950); --surface: var(--akw-n-900); --surface-raised: var(--akw-n-850); --surface-hover: var(--akw-w-06); --surface-inset: var(--akw-n-950); --border: var(--akw-w-08); --border-subtle: var(--akw-w-06); --border-strong: var(--akw-w-14); --text: var(--akw-n-100); --text-body: var(--akw-n-300); --text-muted: var(--akw-n-400); --text-dim: var(--akw-n-500); --text-inverse: var(--akw-n-1000); --accent: var(--akw-violet-400); --accent-fg: var(--akw-n-0); --ok: var(--akw-green-400); --warn: var(--akw-amber-400); --danger: var(--akw-red-400); /* Translucent, so the row still reads as the surface it sits on and the text above it keeps its contrast. */ --danger-wash: rgba(242,102,90,.11); --warn-wash: rgba(227,169,63,.10); --warn-border: rgba(227,169,63,.34); --warn-wash-fg: var(--akw-amber-400); /* Badge tints are light-mode fills with dark text; on this ground they need the hue at low alpha with the bright step as the foreground. */ --accent-tint: rgba(123,108,246,.20); --accent-tint-fg: #B9AFFB; --ok-tint: rgba(52,181,138,.18); --ok-tint-fg: #6FD9B4; --warn-tint: rgba(227,169,63,.18); --warn-tint-fg: #E9C078; --danger-tint: rgba(242,102,90,.18); --danger-tint-fg: #F5948B; --neutral-tint: var(--akw-w-08); --neutral-tint-fg: var(--akw-n-400); /* On dark, "solid" is the inverse: a white control on black. */ --solid: var(--akw-n-0); --solid-hover: var(--akw-n-200); --solid-fg: var(--akw-n-1000); --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.5); } @media (prefers-reduced-motion: reduce) { :root { --ease: linear; } }