/* ── Senshin Design Tokens ────────────────────────────────────────────────── Canonical source of truth for all colours, spacing, and typography. All pages must use these tokens. No hardcoded colours allowed. Design philosophy: The Dojo — Japanese martial arts discipline applied to project delivery. Warm materials palette (kinari, sumi, washi, tatami). Last updated: 2026-04-24 ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand — deep indigo (品格, dignity) ────────────────────────────── */ --brand-primary: #1B4F72; --brand-primary-hover: #154360; --brand-secondary: #7D3C98; /* ── Brand navy (primary button / kanji mark colour) ──────────────── */ --color-navy: #1B4F72; --color-navy-hover: #154360; /* ── Dojo material palette ─────────────────────────────────────────── */ --kinari: #F5F0E8; /* 生成り raw silk — page backgrounds, card surfaces */ --sumi: #2C2C2A; /* 墨 ink black — primary text, warm not clinical */ --sumi-light: #4A4A47; /* diluted ink — secondary text */ --washi: #E8E4DC; /* 和紙 paper — borders, dividers, subtle backgrounds */ --tatami: #D4CFC4; /* 畳 straw mat — inactive/disabled states */ --accent: #E5E4E2; /* 金 gold — logo mark, premium indicators */ /* ── Button tokens (canonical — 2026-04-16 refined aesthetic) ───────── Buttons blend into the UI. Primary is refined filled, not chunky. Secondary is ghost/outline. No large black/navy casings — ever. ──────────────────────────────────────────────────────────────────── */ --btn-primary-bg: var(--brand-primary); /* Deep indigo */ --btn-primary-text: #ffffff; --btn-primary-hover-bg: var(--brand-primary-hover); --btn-secondary-bg: transparent; --btn-secondary-text: var(--brand-primary); --btn-secondary-border: var(--br); --btn-secondary-hover-bg: rgba(27,79,114,.06); --btn-tertiary-text: var(--t2); --btn-destructive-bg: #7a2f2f; /* Muted brick — NEVER --color-red */ --btn-destructive-text: #ffffff; /* ── AI state colours (NEVER red for AI output) ──────────────────── */ --ai-observe: var(--t3); /* Grey — surface only */ --ai-advise: var(--color-blue); /* Blue */ --ai-challenge: var(--color-purple); /* Purple — the sensei speaks */ /* ── RAG — signal whispers, not alarm bells ──────────────────────── */ --rag-red: #C0392B; --rag-red-bg: rgba(192,57,43,.08); --rag-amber: var(--color-amber); --rag-green: var(--color-green); /* ── Pill / chip geometry ─────────────────────────────────────────── */ --pill-status-h: 24px; /* Status chips: 24px height */ --pill-status-px: 12px; /* 12px horizontal padding */ --pill-action-h: 32px; /* Action chips: 32px height */ --pill-action-px: 12px; /* ── Pill density (canonical — use in all pill/badge/chip CSS) ───── §24: RAG/status pills are screen furniture — 9–10px text, full border-radius, tight. One change here propagates to every token-driven pill (.pd-pill, components.css .pill/.ss-pill, …). */ --pill-pad-y: 2px; /* Vertical padding inside pill */ --pill-pad-x: 8px; /* Horizontal padding inside pill */ --pill-font: 10px; /* Pill body font size (§24: 9–10px) */ --pill-radius: 999px; /* §24: full border-radius on status pills */ --pill-height-xs: 18px; /* Tightest pill (Discuss, micro-badge) */ --pill-height-sm: 20px; /* Standard status/RAG pill — compact */ /* ── Inline form field density ────────────────────────────────────── */ --field-height-sm: 32px; /* Compact form field height (ceremonies row etc.) */ --field-pad-y: 6px; --field-pad-x: 10px; --field-font-sm: 13px; /* ── Text — Sumi ink (warm, not clinical) ──────────────────────────── */ --t1: #2C2C2A; /* Primary text — headings, body (sumi ink) */ --t2: #4A4A47; /* Secondary text — supporting info (diluted ink) */ --t3: #6B6B67; /* Tertiary text — labels, meta (WCAG AA 4.5:1 on kinari) */ --t4: #9A9A96; /* Disabled / placeholder text */ /* ── Backgrounds — Kinari (raw silk warmth) ────────────────────────── */ --bg1: #ffffff; /* Page background — clean white */ --bg2: #f8f8f7; /* Card / section background — barely warm */ --bg3: #f0efed; /* Hover / active state — light warm grey */ --bg-nav: #f8f8f7; /* Nav sidebar — light surface */ /* ── Borders — Washi (handmade paper) ──────────────────────────────── */ --br: #E8E4DC; /* Default border — washi */ --br-hover: #D4CFC4; /* Hover border — tatami */ --br-focus: #1B4F72; /* Focus ring — brand indigo */ /* ── Signal colours — the belt system ──────────────────────────────── Critical=red belt, Attention=amber, Advise=blue, On track=green, Challenge=purple (the sensei speaks). 2026-04-21: darkened text-on-bg tokens for WCAG 2.1 AA (4.5:1). 2026-04-24: signal colours are whispers (left-border accents, pill fills at 12% opacity). Never flood a card background with colour. ──────────────────────────────────────────────────────────────────── */ --color-red: #C0392B; --color-red-bg: rgba(192,57,43,.08); --color-red-light: rgba(192,57,43,.12); --color-amber: #B7620E; --color-amber-bg: rgba(230,126,34,.08); --color-amber-light: rgba(230,126,34,.12); --color-green: #22c55e; --color-green-bg: rgba(34,197,94,.08); --color-green-light: rgba(34,197,94,.12); --color-blue: #2E86C1; --color-blue-bg: rgba(46,134,193,.08); --color-blue-light: rgba(46,134,193,.12); --color-purple: #7D3C98; --color-purple-bg: rgba(125,60,152,.08); --color-purple-light: rgba(125,60,152,.12); /* ── Spacing ───────────────────────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* ── Border radius ─────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ══════════════════════════════════════════════════════════════════ TYPOGRAPHY SCALE — CANONICAL, DO NOT DRIFT ────────────────────────────────────────────────────────────────── Single source of truth for every font-size, font-weight, and line-height across Senshin. Components MUST reference these tokens — never hard-code font-size: 12px or font-weight: 800. A lint guard in scripts/lint-type-scale.sh enforces this on CI. RULES 1. Seven sizes. No off-ramp values (no 10px, 15px, 17px, 22px). 2. Three weights only — 400 / 600 / 700. No 300/500/800. 3. Three line-heights — tight / normal / relaxed. 4. 11px is the readability floor (uppercase caption labels only). Body floor is 13px desktop, 14px phone. 5. Form inputs are 16px on phone to prevent iOS zoom-on-focus. 6. Density variants scale SPACING and LINE-HEIGHT only — never size. Resizing type via calc(base * 0.857) produces half- pixel blur and is forbidden. RATIO 14px body anchor × 1.125 modular scale. 11 • 12 • 13 • 14 • 16 • 20 • 28 • 36 ══════════════════════════════════════════════════════════════════ */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace; /* Canonical sizes — role tokens */ --fs-caption: 11px; /* Uppercase tracked labels only. Readability floor. */ --fs-small: 12px; /* Meta, tertiary metadata, chip body, table cells in compact tables */ --fs-body: 13px; /* Dense body, dense table cells, supporting copy */ --fs-base: 14px; /* DEFAULT body, buttons, inputs, controls, nav items */ --fs-lg: 16px; /* Lead paragraph, subheading body, mobile body floor */ --fs-xl: 20px; /* h3, card titles */ --fs-2xl: 28px; /* h2, page-section titles, metric values */ --fs-3xl: 36px; /* h1, page titles */ /* Canonical weights — only these three */ --fw-regular: 400; --fw-semibold: 600; /* Labels, buttons, table headers, UI chrome, emphasis */ --fw-bold: 700; /* Headings h1–h3 only */ /* Canonical line-heights — only these three */ --lh-tight: 1.15; /* Headings */ --lh-normal: 1.5; /* Default body */ --lh-relaxed: 1.65; /* Long-form prose, onboarding copy */ /* Back-compat aliases (being deprecated — do not reference in new code) */ --font-size-xs: var(--fs-caption); --font-size-sm: var(--fs-small); --font-size-base: var(--fs-body); --font-size-md: var(--fs-base); --font-size-lg: var(--fs-lg); --font-size-xl: var(--fs-xl); --font-size-2xl: var(--fs-2xl); --font-size-3xl: var(--fs-3xl); --line-height: var(--lh-normal); /* ── Shadows — ink on paper (minimal, warm) ──────────────────────── */ --shadow-sm: 0 1px 3px rgba(44,44,42,.06); --shadow-md: 0 2px 8px rgba(44,44,42,.08); --shadow-lg: 0 4px 16px rgba(44,44,42,.10); /* ── Touch targets ─────────────────────────────────────────────────── */ --touch-min: 44px; --touch-icon: 36px; /* ── Component dimensions — refined button scale (2026-04-16) ───── Buttons are screen furniture, not visual blocks. Primary: refined filled, small padding, medium weight. Secondary: ghost/outline or text-link. No large black casings — ever. ──────────────────────────────────────────────────────────────── */ --comp-btn-h: 30px; --comp-btn-r: 6px; --comp-btn-px: 10px; --comp-btn-fs: 12px; /* tighter — screen furniture, not blocks */ --comp-btn-fw: 500; /* medium weight, not bold */ --comp-toggle-w: 44px; --comp-toggle-h: 24px; --comp-toggle-r: 12px; --comp-toggle-knob: 18px; --comp-card-r: 10px; --comp-card-p: 16px; --comp-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); --comp-input-h: 40px; --comp-input-r: 8px; --comp-badge-r: 999px; --nav-item-h: 40px; --nav-item-r: 8px; /* ── Transitions ───────────────────────────────────────────────────── */ --transition-fast: 0.12s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* ── Cinematic shell — dark nav/header/footer (homepage energy) ──── */ --shell-bg: #0f0f11; /* Near-black matching homepage */ --shell-bg-subtle: #161618; /* Slightly elevated surface within dark shell */ --shell-border: rgba(255,255,255,0.06); /* Hairline borders */ --shell-text: #E5E4E2; /* Titanium — readable on dark */ --shell-text-muted: #8A8680; /* Dimmed labels */ --shell-text-bright:#E8E4DC; /* Washi white — headings, active items */ --shell-hover: rgba(255,255,255,0.05); /* Hover wash */ --shell-active-bg: rgba(229,228,226,0.12); /* Gold wash for active state */ --shell-active-text:#E5E4E2; /* Gold — active nav item */ --shell-gold: #E5E4E2; /* Brand gold accent */ --shell-gold-dim: rgba(229,228,226,0.55); /* Muted gold for borders */ /* ── Zen shell tokens — nav + header chrome ──────────────────────── */ --zen-ink: var(--sumi); --zen-ink-faint: rgba(44, 44, 42, 0.06); --zen-ink-medium: rgba(44, 44, 42, 0.14); --zen-wash-top: rgba(44, 44, 42, 0.035); --zen-divider-col: rgba(44, 44, 42, 0.13); --zen-accent-warm: rgba(229, 228, 226, 0.55); --zen-texture-op: 0.028; /* ── Zen palette — pervasive, not landing-only ──────────────────── */ --zen-rice: var(--kinari); --zen-parchment: #EDE6D6; --zen-mist: var(--washi); --zen-stone: var(--sumi-light); --zen-earth: #b09070; --zen-gold: var(--accent); --zen-sage: #7a9b76; /* ── Decision layer tokens ───────────────────────────────────────── */ --dl-bg: #fafbff; --dl-border: rgba(37, 99, 235, 0.12); --dl-action-red: #dc2626; --dl-action-amber: #d97706; --dl-action-purple: #7c3aed; --dl-action-green: #16a34a; /* ── Font stacks (display + mono for landing/AI) ─────────────────── */ --font-display: 'Inter', -apple-system, sans-serif; --font-mono-ai: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace; /* ── Dojo motion — ink settling, not rubber bouncing ────────────── */ --motion-fade: 200ms ease-out; --motion-settle: 300ms ease-out; --motion-lift: 200ms ease; /* ══════════════════════════════════════════════════════════════════ UNDEFINED-VAR SHIM (added 2026-05-12 after design-sweep audit) ────────────────────────────────────────────────────────────────── The 1ee698a tokenisation sweep left ~124 CSS variables referenced but never declared, with ~440 combined call sites across the app. Each one below aliases a legacy short-name to its canonical token so `var(--name)` resolves instead of falling back to the default. Do NOT add new uses of these — they exist only to stop the bleed. ══════════════════════════════════════════════════════════════════ */ --line: var(--br); /* 106 uses — border short-name */ --ss-line: var(--br); /* 18 uses — alt border name */ --surface: var(--bg1); /* 72 uses — generic surface */ --purple: var(--color-purple); /* 40 uses — accent shorthand */ --grey-mid: var(--t3); /* 32 uses — divider grey */ --r: var(--radius-sm); /* 23 uses — radius shorthand */ --s1: 4px; /* matches --space-xs / --s-1 */ --s2: 8px; /* 86 uses — spacing shorthand */ --s3: 12px; /* 19 uses */ --s4: 16px; --s5: 24px; --s6: 32px; --dur: 0.12s; /* 29 uses — transition dur */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* 26 uses — canonical easing */ /* ══════════════════════════════════════════════════════════════════ EXTENDED PALETTE (added 2026-05-25 — §24 hex→token migration) ────────────────────────────────────────────────────────────────── Exact-value tokens for colours that recurred as hardcoded hex across pages_vnext / components_vnext. Tailwind-aligned shade names for the action families; dojo-semantic names for warm neutrals. Zero render change — each maps a literal hex 1:1. Prefer the canonical RAG / --color-* / --dl-action-* tokens above for NEW work; these exist to retire hardcoded hex without altering pixels. ══════════════════════════════════════════════════════════════════ */ /* Neutrals — pure */ --color-white: #ffffff; --color-black: #000000; /* Red scale (action/danger) */ --red-50: #fdecec; --red-100: #fee2e2; --red-200: #fecaca; --red-700: #b91c1c; --red-800: #991b1b; --red-900: #7f1d1d; /* Amber / orange scale */ --amber-50: #fff8e5; --amber-100: #fef3c7; --amber-500: #f59e0b; --amber-700: #b45309; --amber-800: #92400e; --amber-900: #78350f; --orange-600: #ea580c; --orange-800: #9a3412; /* Green / emerald / teal scale */ --green-100: #dcfce7; --green-800: #166534; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-600: #0d9488; /* Blue scale */ --blue-100: #dbeafe; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af; /* Violet / indigo scale */ --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-700: #6d28d9; --violet-800: #5b21b6; --violet-900: #4c1d95; --violet-950: #2e1065; --indigo-800: #3730a3; --indigo-950: #1e1b4b; /* Slate / zinc / grey (cool) */ --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-500: #64748b; --slate-800: #1e293b; --zinc-400: #a1a1aa; --zinc-500: #71717a; --gray-500: #6b7280; --grey-200: #d4d4d2; --grey-300: #cccccc; --neutral-50: #fafafa; /* Warm dojo neutrals */ --stone-100: #e6e6e3; --stone-200: #e0ddd6; --stone-300: #d8d6d0; --ink-900: #1a1a17; --ink-950: #1c1c1a; /* Earth / brand accents */ --brown-400: #8d6e63; --gold-900: #6b4f0f; --brand-muted: #7e8fa1; } /* ── Dark mode — tatami-to-ink inversion (warm, not blue-black) ─────── */ /* Two activation paths: 1. OS prefers-color-scheme: dark AND user hasn't explicitly chosen light or auto — covers the data-theme="auto" path 2. User explicitly picked Dark in the avatar dropdown (data-theme="dark") — overrides OS preference */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --t1: #E8E4DC; --t2: #E5E4E2; --t3: #9A9A96; --t4: #6B6B67; --bg1: #1A1A18; --bg2: #2C2C2A; --bg3: #3A3A37; --bg-nav: #1A1A18; --br: #4A4A47; --br-hover: #6B6B67; --color-red-bg: rgba(192,57,43,.18); --color-red-light: rgba(192,57,43,.25); --color-amber-bg: rgba(230,126,34,.18); --color-amber-light: rgba(230,126,34,.25); --color-green-bg: rgba(34,197,94,.18); --color-green-light: rgba(34,197,94,.25); --color-blue-bg: rgba(46,134,193,.18); --color-blue-light: rgba(46,134,193,.25); --color-purple-bg: rgba(125,60,152,.18); --color-purple-light: rgba(125,60,152,.25); --shadow-sm: 0 1px 3px rgba(0,0,0,.30); --shadow-md: 0 2px 8px rgba(0,0,0,.35); --shadow-lg: 0 4px 16px rgba(0,0,0,.40); --kinari: #2C2C2A; --sumi: #E8E4DC; --washi: #4A4A47; --tatami: #6B6B67; } } :root[data-theme="dark"] { --t1: #E8E4DC; --t2: #E5E4E2; --t3: #9A9A96; --t4: #6B6B67; --bg1: #1A1A18; --bg2: #2C2C2A; --bg3: #3A3A37; --bg-nav: #1A1A18; --br: #4A4A47; --br-hover: #6B6B67; --color-red-bg: rgba(192,57,43,.18); --color-red-light: rgba(192,57,43,.25); --color-amber-bg: rgba(230,126,34,.18); --color-amber-light: rgba(230,126,34,.25); --color-green-bg: rgba(34,197,94,.18); --color-green-light: rgba(34,197,94,.25); --color-blue-bg: rgba(46,134,193,.18); --color-blue-light: rgba(46,134,193,.25); --color-purple-bg: rgba(125,60,152,.18); --color-purple-light: rgba(125,60,152,.25); --shadow-sm: 0 1px 3px rgba(0,0,0,.30); --shadow-md: 0 2px 8px rgba(0,0,0,.35); --shadow-lg: 0 4px 16px rgba(0,0,0,.40); --kinari: #2C2C2A; --sumi: #E8E4DC; --washi: #4A4A47; --tatami: #6B6B67; } /* ── Accessibility ──────────────────────────────────────────────────── */ /* Focus visible ring */ :focus-visible { outline: 2px solid var(--br-focus); outline-offset: 2px; } /* Skip to content link */ .skip-link { position: absolute; top: -100%; left: 8px; z-index: 10000; padding: 8px 16px; background: var(--brand-primary); color: #fff; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 8px; } /* Minimum touch target */ button, a, input[type="checkbox"], input[type="radio"], select { min-height: var(--touch-icon); } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* High contrast mode */ @media (forced-colors: active) { .pd-pill, .les-tag, .md-card, .audit-action { border: 1px solid currentColor; } } /* ── Density variants ───────────────────────────────────────────────── Density affects SPACING + LINE-HEIGHT only — never font-size. Resizing type via density produces half-pixel blur. ───────────────────────────────────────────────────────────────────── */ body.density-compact { --density-padding: 6px 10px; --density-gap: 6px; --density-row-height: 36px; --density-line-height: 1.4; } body.density-comfortable { --density-padding: 10px 14px; --density-gap: 10px; --density-row-height: 44px; --density-line-height: 1.5; } body.density-spacious { --density-padding: 14px 18px; --density-gap: 14px; --density-row-height: 52px; --density-line-height: 1.65; } /* ── Decision tags — Act Now / Escalate / Watch / On Track ──────────── */ .dtag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.6; color: #fff; } .dtag--act { background: var(--color-red); } .dtag--watch { background: var(--color-amber); } .dtag--escalate { background: var(--color-purple); } .dtag--track { background: var(--color-green); } /* ── AI narrator voice — threaded across pages ─────────────────────── */ .ai-voice { font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--brand-secondary); display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; } .ai-voice::before { content: '\25C6'; font-size: 8px; margin-top: 3px; flex-shrink: 0; opacity: 0.7; } .ai-voice--dark { color: rgba(167,139,250,0.7); } /* Hero ranking justification sits on a LIGHT card — the old pale-lavender at 60% opacity / 11px was ~1.5:1 (barely visible). Use the solid brand purple (~7:1 on white) at the readable 12px AI-voice size. */ .ai-voice--hero { color: var(--brand-secondary); margin-top: 12px; font-size: 12px; } .ai-voice--muted { color: var(--t3); } /* ── Impact chain — causal flow visualisation ──────────────────────── */ .impact-chain { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .impact-chain__node { padding: 4px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--fw-semibold); white-space: nowrap; } .impact-chain__node--trigger { background: var(--color-red-bg); color: var(--color-red); } .impact-chain__node--effect { background: var(--color-amber-bg); color: var(--color-amber); } .impact-chain__node--cascade { background: var(--color-purple-bg); color: var(--color-purple); } .impact-chain__arrow { font-size: 12px; color: var(--t3); margin: 0 4px; flex-shrink: 0; } /* ── Base ────────────────────────────────────────────────────────────── */ body { font-family: var(--font-family); color: var(--t1); background: var(--bg1); line-height: var(--line-height); -webkit-font-smoothing: antialiased; }