/* ============================================================ THE BLIND SPOT · by IRIS AI Design tokens — v2.1 (Aug 2026) Values verified against logo_blue-bg.svg / logo_black-bg.svg จุดเสี่ยงของธุรกิจ รู้ก่อน เลี่ยงก่อน ============================================================ */ :root { /* ---- Core four (the brand. nothing else is the brand) ---- */ --bs-blue: #0056FF; /* Signal Blue — from the production SVGs */ --bs-amber: #FFA902; /* Alert Amber */ --bs-void: #000000; /* Void */ --bs-paper: #FFFFFF; /* Paper */ /* ---- Derived, for accessibility only. Never a "brand colour" ---- */ --bs-blue-lift: #266FFF; /* blue text/icons on Void — 4.80:1 */ --bs-blue-deep: #0049D9; /* blue pressed / links on Paper — 7.11:1 */ --bs-blue-wash: #F0F5FF; /* tinted panel on Paper */ --bs-amber-deep: #8C5D01; /* amber-as-text on Paper — 5.70:1 */ /* ---- Neutrals, dark surfaces ---- */ --bs-surface: #0A0A0A; --bs-raised: #141414; --bs-line-dark: #262626; --bs-muted-dark: #8A8A8A; /* 6.08:1 on Void */ --bs-subtle-dark: #B3B3B3; /* 10.02:1 on Void */ /* ---- Neutrals, light surfaces ---- */ --bs-wash: #F5F5F5; --bs-line-light: #E5E5E5; --bs-muted-light: #707070; /* 4.95:1 on Paper */ /* ---- Status set. Functional, deliberately outside the brand ---- */ --bs-pass: #12B76A; --bs-watch: #FFA902; /* = Alert Amber */ --bs-critical: #E4483A; --bs-status-ink: #000000; /* status chips are ALWAYS black text on fill */ /* ---- Type ---- */ --bs-font-display: 'Anuphan', 'Inter Tight', 'Inter', system-ui, sans-serif; --bs-font-body: 'Anuphan', 'IBM Plex Sans Thai', system-ui, sans-serif; --bs-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* The wordmark is outlined artwork in the shipped SVGs — not a font dependency. */ --bs-lh-display-th: 1.25; /* Thai display needs more than Latin */ --bs-lh-body-th: 1.65; --bs-track-display: -0.02em; --bs-track-mono: 0.12em; /* ---- Geometry, measured from the production mark ---- */ --bs-cell-gap-ratio: 4.2857; /* cell : gap = 30 : 7 */ --bs-clear-space: 0.288; /* one cell = 0.288 × mark height */ --bs-radius-mark: 0.0667; /* cell radius = 1/15 of cell width */ --bs-radius-sm: 2px; /* UI equivalent at a 30px cell */ --bs-radius-md: 4px; --bs-radius-pill: 999px; /* ---- Lockup construction ---- */ --bs-lockup-gap: 0.283; /* mark → wordmark, × mark height */ --bs-lockup-cap: 0.480; /* wordmark cap height, × mark height */ --bs-lockup-offset: 0.063; /* wordmark cap-top below mark top, × mark height */ } /* ============================================================ Semantic theme layer The tokens above are brand constants and never change. These map them onto a surface. Set data-theme on . ============================================================ */ html[data-theme="dark"] { /* Void — the brand default */ --bs-bg: #000000; --bs-bg-surface: #0A0A0A; --bs-bg-raised: #141414; --bs-border: #262626; --bs-text: #FFFFFF; --bs-text-subtle:#B3B3B3; /* 10.02:1 */ --bs-text-muted: #8A8A8A; /* 6.08:1 */ --bs-text-faint: #4D4D4D; /* decorative only — below AA */ --bs-text-link: #266FFF; /* 4.80:1 — pure blue fails here */ --bs-text-amber: #FFA902; /* 10.93:1 */ --bs-text-pass: #12B76A; /* 8.01:1 */ --bs-text-crit: #E4483A; /* 5.29:1 */ } html[data-theme="light"] { /* Paper */ --bs-bg: #FFFFFF; --bs-bg-surface: #FAFAFA; --bs-bg-raised: #F5F5F5; --bs-border: #E5E5E5; --bs-text: #000000; --bs-text-subtle:#3D3D3D; /* 10.86:1 */ --bs-text-muted: #707070; /* 4.95:1 */ --bs-text-faint: #A3A3A3; /* decorative only — below AA */ --bs-text-link: #0049D9; /* 7.11:1 */ --bs-text-amber: #8C5D01; /* 5.70:1 — pure amber is 1.92:1, unusable */ --bs-text-pass: #0D804A; /* 5.00:1 — #12B76A is 2.62:1, unusable */ --bs-text-crit: #AB362C; /* 6.37:1 */ } /* Status CHIPS are exempt: always the raw status colour as fill with black text. That holds at AA on both surfaces, so chips never need a theme. */