/* AirStory design tokens — source: "App design improvements - airstory/README.md" §Design Tokens (the token source of truth; see DESIGN-REFRESH.md). Dark ("AirStory navy") is the default; light ("AirStory cool-white") applies via prefers-color-scheme, and an explicit choice via (set from localStorage before first paint) wins in both directions. One accent (blue) for ALL interactive chrome; emphasis, not hue, carries meaning. Data colors (clip green, moments violet, speed ribbon, HUD orange, danger red) are deliberately NOT tokens of this sheet — they stay semantic. */ :root { color-scheme: dark; /* surfaces */ --canvas: #0b1224; --surface: #131c30; --inset: #0a101f; --elevated: #1c2740; --border: #26324c; --divider: #1c2740; --shadow: none; --pop-shadow: rgba(0,0,0,.55); /* text */ --text: #eef2fb; --muted: #9aa8c4; --faint: #7686a6; --faint2: #4a5674; /* the one accent */ --accent: #4c8df6; --on-tint: #8bb6fb; --tint-bg: #16305c; --tint-border: #2f5fae; --primary: #2f6fe0; --primary-hover: #3d7ce8; --on-primary: #fff; --primary-border: rgba(255,255,255,.14); --select-bg: linear-gradient(135deg, #5b9bf5, #2f6fe0); /* brand */ --logo-grad: linear-gradient(135deg, #5b9bf5, #2f6fe0); --pro-fg: #8bb6fb; --pro-border: #4c8df6; /* status (shared) */ --danger: #f85149; --danger-bg: rgba(248,81,73,.12); --ok: #56d364; --ok-bg: rgba(63,185,80,.12); --warn: #d29922; } @media (prefers-color-scheme: light) { :root { color-scheme: light; --canvas: #f2f4f9; --surface: #fff; --inset: #e9edf6; --elevated: #e7ecf6; --border: rgba(20,30,60,.12); --divider: #e4e9f2; --shadow: 0 2px 10px rgba(20,30,60,.06); --pop-shadow: rgba(20,30,60,.18); --text: #141d33; --muted: #5c6784; --faint: #98a2ba; --faint2: #b6bfd4; --accent: #2f6fe0; --on-tint: #2f6fe0; --tint-bg: #e4edfd; --tint-border: #2f6fe0; --primary: #2f6fe0; --primary-hover: #2a63c8; --on-primary: #fff; --primary-border: rgba(20,30,60,.08); --select-bg: #2f6fe0; --logo-grad: linear-gradient(135deg, #5b9bf5, #2f6fe0); --pro-fg: #2f6fe0; --pro-border: #8fb4f6; --danger: #c0392b; --danger-bg: #fbecec; --ok: #22633a; --ok-bg: #e8f4ea; --warn: #9a6700; } } :root[data-theme="dark"] { color-scheme: dark; --canvas: #0b1224; --surface: #131c30; --inset: #0a101f; --elevated: #1c2740; --border: #26324c; --divider: #1c2740; --shadow: none; --pop-shadow: rgba(0,0,0,.55); --text: #eef2fb; --muted: #9aa8c4; --faint: #7686a6; --faint2: #4a5674; --accent: #4c8df6; --on-tint: #8bb6fb; --tint-bg: #16305c; --tint-border: #2f5fae; --primary: #2f6fe0; --primary-hover: #3d7ce8; --on-primary: #fff; --primary-border: rgba(255,255,255,.14); --select-bg: linear-gradient(135deg, #5b9bf5, #2f6fe0); --logo-grad: linear-gradient(135deg, #5b9bf5, #2f6fe0); --pro-fg: #8bb6fb; --pro-border: #4c8df6; --danger: #f85149; --danger-bg: rgba(248,81,73,.12); --ok: #56d364; --ok-bg: rgba(63,185,80,.12); --warn: #d29922; } :root[data-theme="light"] { color-scheme: light; --canvas: #f2f4f9; --surface: #fff; --inset: #e9edf6; --elevated: #e7ecf6; --border: rgba(20,30,60,.12); --divider: #e4e9f2; --shadow: 0 2px 10px rgba(20,30,60,.06); --pop-shadow: rgba(20,30,60,.18); --text: #141d33; --muted: #5c6784; --faint: #98a2ba; --faint2: #b6bfd4; --accent: #2f6fe0; --on-tint: #2f6fe0; --tint-bg: #e4edfd; --tint-border: #2f6fe0; --primary: #2f6fe0; --primary-hover: #2a63c8; --on-primary: #fff; --primary-border: rgba(20,30,60,.08); --select-bg: #2f6fe0; --logo-grad: linear-gradient(135deg, #5b9bf5, #2f6fe0); --pro-fg: #2f6fe0; --pro-border: #8fb4f6; --danger: #c0392b; --danger-bg: #fbecec; --ok: #22633a; --ok-bg: #e8f4ea; --warn: #9a6700; }