/* * bra0 site — unified design tokens * Source of truth: blueprint.html palette (Tailwind gray + semantic accents) * Loaded by all site pages: home.html, knowledge-space.html, blueprint.html */ /* ---- Fonts (shared Google Fonts link expected in each page ) ---- */ :root { --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; } /* ================================================================ DARK THEME (default) ================================================================ */ :root { /* Surfaces */ --bg: #202020; --surface: #2a2a2a; --surface2: #353535; --surface3: #444444; /* Borders */ --border: rgba(255,255,255,0.08); --border-bright: rgba(255,255,255,0.15); /* Text */ --text: #eeeeee; --text-dim: #8e8e8e; --text-muted: #6a6a6a; /* ---- Accent colors — SimplClan PDF exact values ---- */ /* why (orange) */ --orange: #fb6818; --orange-dim: rgba(251,104,24,0.12); --orange-light: #fcb691; --orange-deep: #e74e03; --orange-darkest: #b83f09; /* map (green/mint) */ --green: #43ca9b; --green-dim: rgba(67,202,155,0.12); --green-light: #59f8c1; --green-dark: #1ea773; --green-darkest: #038350; /* rythm (pink) */ --pink: #df4678; --pink-dim: rgba(223,70,120,0.12); --pink-light: #f1abbf; --pink-lightest: #f7cedaff; --pink-dark: #8D1953; /* known (yellow) */ --yellow: #ffe808; --yellow-dim: rgba(255,232,8,0.12); --yellow-light: #f3ff7b; --yellow-dark: #c67601; --yellow-darkest: #8a2d00; /* neutrals */ --neutral-light: #8e8e8e; --neutral-mid: #6a6a6a; --neutral-dark: #404145; /* bra0 logo blue */ --bra0-blue: #0046b2; --bra0-blue-dim: rgba(0,70,178,0.15); --bra0-blue-light: #4d94ff; /* structural aliases */ --purple: #a78bfa; --purple-dim: rgba(167,139,250,0.12); --blue: #0046b2; --blue-dim: rgba(0,70,178,0.12); --indigo: #818cf8; --indigo-dim: rgba(129,140,248,0.10); /* Aliases for legacy var() references */ --teal: #43ca9b; --teal-dim: rgba(67,202,155,0.12); --cyan: #fb6818; --cyan-dim: rgba(251,104,24,0.12); --amber: #ffe808; --amber-dim: rgba(255,232,8,0.12); --red: #df4678; --red-dim: rgba(223,70,120,0.12); /* ---- Blueprint capability families ---- */ --cp: #1ea773; --cp-dim: rgba(30,167,115,0.12); /* Control Plane — map-dark */ --sl: #43ca9b; --sl-dim: rgba(67,202,155,0.12); /* Semantic Layer — map */ --dp: #60a5fa; --dp-dim: rgba(96,165,250,0.12); /* Data Plane */ --ns: #ffe808; --ns-dim: rgba(255,232,8,0.12); /* Neurosymbolic — known */ --tp: #df4678; --tp-dim: rgba(223,70,120,0.12); /* Topo Perception — rythm */ /* ---- Status badges ---- */ --ok: #43ca9b; --warn: #ffe808; --gap: #df4678; --plan: #60a5fa; } /* ================================================================ LIGHT THEME — via data-theme attribute (set by site-nav.js) ================================================================ */ :root[data-theme="light"] { --bg: #ffffff; --surface: #f9fafb; --surface2: #f3f4f6; --surface3: #e5e7eb; --border: rgba(0,0,0,0.08); --border-bright: rgba(0,0,0,0.15); --text: #303134; /* SimplClan neutral-dark */ --text-dim: #6a6a6a; /* SimplClan neutral */ --text-muted: #8e8e8e; /* SimplClan neutral-light */ --blue: #2563eb; --blue-dim: rgba(37,99,235,0.08); --purple: #7c3aed; --purple-dim: rgba(124,58,237,0.08); --green: #038350; --green-dim: rgba(3,131,80,0.08); /* map-darkest */ --teal: #1ea773; --teal-dim: rgba(30,167,115,0.08); /* map-dark */ /* SimplClan light-mode overrides — darker shades for white bg readability */ --orange: #e74e03; --orange-dim: rgba(231,78,3,0.08); /* why-dark */ --orange-deep: #b83f09; --orange-light: #fb6818; --yellow: #c67601; --yellow-dim: rgba(198,118,1,0.08); /* known-dark */ --yellow-light: #ffe808; --yellow-dark: #8a2d00; --pink: #8D1953; --pink-dim: rgba(141,25,83,0.06); /* rythm-dark */ --pink-light: #df4678; --bra0-blue: #0046b2; --bra0-blue-dim: rgba(0,70,178,0.08); --bra0-blue-light: #0046b2; /* Legacy aliases */ --amber: #c67601; --amber-dim: rgba(198,118,1,0.08); --cyan: #e74e03; --cyan-dim: rgba(231,78,3,0.08); --red: #8D1953; --red-dim: rgba(141,25,83,0.06); --cp: #1ea773; --cp-dim: rgba(30,167,115,0.08); --sl: #038350; --sl-dim: rgba(3,131,80,0.08); --dp: #2563eb; --dp-dim: rgba(37,99,235,0.08); --ns: #c67601; --ns-dim: rgba(198,118,1,0.08); --tp: #8D1953; --tp-dim: rgba(141,25,83,0.08); --ok: #16a34a; --warn: #d97706; --gap: #dc2626; --plan: #2563eb; } /* ---- System preference fallback (for users without JS / first paint) ---- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #ffffff; --surface: #f9fafb; --surface2: #f3f4f6; --surface3: #e5e7eb; --border: rgba(0,0,0,0.08); --border-bright: rgba(0,0,0,0.15); --text: #303134; --text-dim: #6a6a6a; --text-muted: #8e8e8e; --blue: #2563eb; --blue-dim: rgba(37,99,235,0.08); --purple: #7c3aed; --purple-dim: rgba(124,58,237,0.08); --green: #038350; --green-dim: rgba(3,131,80,0.08); --teal: #1ea773; --teal-dim: rgba(30,167,115,0.08); --orange: #e74e03; --orange-dim: rgba(231,78,3,0.08); --orange-deep: #b83f09; --yellow: #c67601; --yellow-dim: rgba(198,118,1,0.08); --yellow-dark: #8a2d00; --pink: #8D1953; --pink-dim: rgba(141,25,83,0.06); --bra0-blue: #0046b2; --bra0-blue-dim: rgba(0,70,178,0.08); --bra0-blue-light: #0046b2; --amber: #c67601; --amber-dim: rgba(198,118,1,0.08); --cyan: #e74e03; --cyan-dim: rgba(231,78,3,0.08); --red: #8D1953; --red-dim: rgba(141,25,83,0.06); --cp: #1ea773; --cp-dim: rgba(30,167,115,0.08); --sl: #038350; --sl-dim: rgba(3,131,80,0.08); --dp: #2563eb; --dp-dim: rgba(37,99,235,0.08); --ns: #c67601; --ns-dim: rgba(198,118,1,0.08); --tp: #8D1953; --tp-dim: rgba(141,25,83,0.08); --ok: #16a34a; --warn: #d97706; --gap: #dc2626; --plan: #2563eb; } } /* ================================================================ SHARED RESET & BASE ================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; } /* Subtle dot grid background (shared atmosphere) */ body { background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 28px 28px; } a { color: var(--orange); } a:hover { color: var(--text); } /* ---- Animations ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeScale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0s !important; } }