/* Design tokens — Tobira. (owner: FND) Light is the default; dark follows the OS unless is set. THREE blocks carry colours and tools/contrast.mjs parses all of them, so keep this structure: 1. :root light (default) + theme-independent tokens 2. @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... } } 3. :root[data-theme="dark"] { ... } (blocks 2 and 3 must stay identical; contrast.mjs fails on drift) Colour rules (00-overview.md 6.2): ratios are binding, hex values are not. - --text-3 only on --bg / --surface (never on --surface-2 / --surface-3: use --text-2 there). - --accent is NOT a text colour; flames/streak numbers use --accent-ink. - text on --primary-soft / --surface-3 that is "primary" coloured uses --primary-strong. - controls (inputs, select, textarea, slider tracks, checkbox edges) use --border-ui; --border is for dividers. - --field-N is a decorative fill; where a field colour is the only cue use --field-N-ink (>= 3:1). Never write hex/rgb colours outside this file. */ :root { color-scheme: light dark; --font-ui: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace; --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --content-w: 1120px; --reading-w: 720px; --header-h: 60px; --tap: 44px; /* minimum touch / click target (WCAG 2.5.5 level AAA, our floor) */ --focus-w: 3px; /* focus ring thickness */ --bg: #f4f7fc; --surface: #ffffff; --surface-2: #eaf0fa; --surface-3: #dde6f5; --border: #d2dbec; /* dividers only */ --border-ui: #6f7fa2; /* control boundaries, >= 3:1 on --bg / --surface / --surface-2 */ --text: #0c1426; --text-2: #3f4a66; --text-3: #636e8c; /* only on --bg / --surface */ --primary: #256abf; --primary-strong: #174a8f; /* text on --primary-soft / --surface-3 */ --primary-soft: #dbe9fb; --primary-ink: #ffffff; --accent: #eb6834; /* streak / energy: decoration only, never text */ --accent-soft: #fde6dc; --accent-ink: #b8420f; /* flame / streak digits (on --accent-soft and --surface) */ --ok: #14764a; --ok-soft: #dff3e8; --warn: #8f5200; --warn-soft: #fff0cc; --err: #b3261e; --err-soft: #fde7e5; --focus: #1c5cab; --shadow-1: 0 1px 2px rgba(12, 20, 38, .06), 0 2px 8px rgba(12, 20, 38, .06); --shadow-2: 0 4px 12px rgba(12, 20, 38, .10), 0 12px 32px rgba(12, 20, 38, .10); /* 8 field hues — fixed order, never cycled (validated categorical palette). Decorative fills only. */ --field-1: #2a78d6; /* 飛行の原理 blue */ --field-2: #eb6834; /* 機体と電装 orange */ --field-3: #1baf7a; /* 飛行制御 aqua */ --field-4: #eda100; /* 航法と認識 yellow */ --field-5: #e87ba4; /* 気象と環境 magenta */ --field-6: #008300; /* 法規と空域 green */ --field-7: #4a3aa7; /* 安全とリスク violet */ --field-8: #e34948; /* 運航と管理 red */ /* "-ink" = the same hue darkened to >= 3:1 on --surface and --bg, for lines/bars/text where colour is a cue. Identification still always comes from an icon + a name; colour never stands alone. */ --field-1-ink: var(--field-1); --field-2-ink: #c24a1a; --field-3-ink: #0e8a5f; --field-4-ink: #9a6a00; --field-5-ink: #c64f7e; --field-6-ink: var(--field-6); --field-7-ink: var(--field-7); --field-8-ink: var(--field-8); /* charts */ --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #0e8a5f; --viz-grid: #d2dbec; --viz-axis: #6f7ca3; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0b1020; --surface: #131a2e; --surface-2: #1a233b; --surface-3: #232e4b; --border: #2b3756; --border-ui: #6b79a2; --text: #f2f5fc; --text-2: #c3cce3; --text-3: #93a0c4; --primary: #5b9bf0; --primary-strong: #86b6ef; --primary-soft: #1c2c4d; --primary-ink: #0b1020; --accent: #ff8a5c; --accent-soft: #3a2218; --accent-ink: #ff8a5c; --ok: #5fd39a; --ok-soft: #12301f; --warn: #f2b84b; --warn-soft: #3a2c0c; --err: #ff8d86; --err-soft: #3d1815; --focus: #86b6ef; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 28px rgba(0,0,0,.5); --field-1: #3987e5; --field-2: #d95926; --field-3: #199e70; --field-4: #c98500; --field-5: #d55181; --field-6: #008300; --field-7: #9085e9; --field-8: #e66767; --field-1-ink: var(--field-1); --field-2-ink: var(--field-2); --field-3-ink: var(--field-3); --field-4-ink: var(--field-4); --field-5-ink: var(--field-5); --field-6-ink: #2ea02e; --field-7-ink: var(--field-7); --field-8-ink: var(--field-8); --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-grid: #2b3756; --viz-axis: #6f7ca3; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1020; --surface: #131a2e; --surface-2: #1a233b; --surface-3: #232e4b; --border: #2b3756; --border-ui: #6b79a2; --text: #f2f5fc; --text-2: #c3cce3; --text-3: #93a0c4; --primary: #5b9bf0; --primary-strong: #86b6ef; --primary-soft: #1c2c4d; --primary-ink: #0b1020; --accent: #ff8a5c; --accent-soft: #3a2218; --accent-ink: #ff8a5c; --ok: #5fd39a; --ok-soft: #12301f; --warn: #f2b84b; --warn-soft: #3a2c0c; --err: #ff8d86; --err-soft: #3d1815; --focus: #86b6ef; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 28px rgba(0,0,0,.5); --field-1: #3987e5; --field-2: #d95926; --field-3: #199e70; --field-4: #c98500; --field-5: #d55181; --field-6: #008300; --field-7: #9085e9; --field-8: #e66767; --field-1-ink: var(--field-1); --field-2-ink: var(--field-2); --field-3-ink: var(--field-3); --field-4-ink: var(--field-4); --field-5-ink: var(--field-5); --field-6-ink: #2ea02e; --field-7-ink: var(--field-7); --field-8-ink: var(--field-8); --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-grid: #2b3756; --viz-axis: #6f7ca3; } /* An explicit light choice must also flip native widgets (scrollbars, date pickers) when the OS is dark. */ :root[data-theme="light"] { color-scheme: light; }