/* ========================================================= GlobeWarn — theme.css Five themes. Every chrome colour resolves to a variable here. Severity colours are LOCKED: identical in every theme, so red is red whether the reader is in daylight or in a night ops room. Switch by setting data-theme on . Default = light-blue-sky. ========================================================= */ :root, [data-theme="light-blue-sky"] { --bg: #EAF3FB; --surface: #FFFFFF; --surface-alt: #DCEBF7; --ink: #0B1F33; --ink-soft: #405A72; --ink-faint: #5A6A79; --accent: #1C66C8; --accent-ink: #FFFFFF; --accent-wash: #DDEBFA; --accent-2: #0A727C; --line: #CFDFEC; --line-strong: #B4CADB; --shadow-a: rgba(11, 31, 51, 0.06); --shadow-b: rgba(11, 31, 51, 0.12); --map-land: #C6D9E8; --map-land-bg: #B9CEDF; --map-night: rgba(11, 31, 51, 0.14); --map-grid: rgba(11, 31, 51, 0.08); --cone: #D9480F; --cone-band: #FFFFFF; color-scheme: light; } [data-theme="situation-room"] { --bg: #0B1220; --surface: #121B2C; --surface-alt: #1A2539; --ink: #E7EEF7; --ink-soft: #9FB0C6; --ink-faint: #7E8DA0; --accent: #5CA8FF; --accent-ink: #0B1220; --accent-wash: #1B2C47; --accent-2: #2ED3C3; --line: #233048; --line-strong: #33445F; --shadow-a: rgba(0, 0, 0, 0.35); --shadow-b: rgba(0, 0, 0, 0.55); --map-land: #22314A; --map-land-bg: #1B2A40; --map-night: rgba(0, 0, 0, 0.38); --map-grid: rgba(231, 238, 247, 0.06); --cone: #D9480F; --cone-band: #F4F8FF; color-scheme: dark; } [data-theme="paper"] { --bg: #F7F4EC; --surface: #FFFDF8; --surface-alt: #EFEAE0; --ink: #1E1B16; --ink-soft: #5A544A; --ink-faint: #6E695F; --accent: #2F5D8A; --accent-ink: #FFFFFF; --accent-wash: #E4ECF3; --accent-2: #786839; --line: #E0DACD; --line-strong: #CBC3B2; --shadow-a: rgba(30, 27, 22, 0.06); --shadow-b: rgba(30, 27, 22, 0.12); --map-land: #DED8CA; --map-land-bg: #D3CCBB; --map-night: rgba(30, 27, 22, 0.12); --map-grid: rgba(30, 27, 22, 0.08); --cone: #D9480F; --cone-band: #FFFDF8; color-scheme: light; } [data-theme="atlas"] { --bg: #EEF0E6; --surface: #F8F9F3; --surface-alt: #E3E7D6; --ink: #1F2A1F; --ink-soft: #4E5C4E; --ink-faint: #5E695E; --accent: #3D6B4F; --accent-ink: #FFFFFF; --accent-wash: #DCE8DF; --accent-2: #865F20; --line: #D5DAC6; --line-strong: #BBC3A8; --shadow-a: rgba(31, 42, 31, 0.06); --shadow-b: rgba(31, 42, 31, 0.12); --map-land: #CDD5BD; --map-land-bg: #C0C9AE; --map-night: rgba(31, 42, 31, 0.14); --map-grid: rgba(31, 42, 31, 0.08); --cone: #D9480F; --cone-band: #F8F9F3; color-scheme: light; } [data-theme="high-contrast"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F2F2F2; --ink: #000000; --ink-soft: #1A1A1A; --ink-faint: #333333; --accent: #0000D6; --accent-ink: #FFFFFF; --accent-wash: #E6E6FF; --accent-2: #006B5E; --line: #9A9A9A; --line-strong: #6B6B6B; --shadow-a: rgba(0, 0, 0, 0.10); --shadow-b: rgba(0, 0, 0, 0.20); --map-land: #BFBFBF; --map-land-bg: #B0B0B0; --map-night: rgba(0, 0, 0, 0.28); --map-grid: rgba(0, 0, 0, 0.07); --cone: #D9480F; --cone-band: #FFFFFF; color-scheme: light; } /* ---- Brand ---- "warn" carries the colour of a road-works cone: safety orange #D9480F, the same value in every theme. Held one step deeper than the orange severity tier so the wordmark can never be mistaken for an alert level; contrast checked on all five backgrounds (3.7:1 to 4.4:1). ---- */ /* ---- Severity: locked in every theme ---- */ :root { --sev-red: #D7263D; --sev-orange: #F26A1B; --sev-yellow: #E0B100; --sev-green: #2E8B57; --sev-blue: #1E6FD9; --sev-black: #111111; --sev-gray: #8A96A3; --sev-red-wash: rgba(215, 38, 61, 0.10); --sev-orange-wash: rgba(242, 106, 27, 0.10); --sev-yellow-wash: rgba(224, 177, 0, 0.12); --sev-green-wash: rgba(46, 139, 87, 0.10); } /* ---- Reader text size (cycled from the rail) ---- */ :root, [data-size="m"] { --scale: 1; } [data-size="l"] { --scale: 1.125; } [data-size="xl"] { --scale: 1.25; } /* ---- Shared, theme-independent tokens ---- */ :root { --font-display: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; --content-max: 860px; --bar-h: 44px; --rail-size: 38px; --rail-gap: 6px; --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; --shadow-soft: 0 1px 2px var(--shadow-a), 0 8px 24px var(--shadow-a); --shadow-lift: 0 1px 2px var(--shadow-a), 0 14px 34px var(--shadow-b); --ease: cubic-bezier(0.4, 0, 0.2, 1); }