/* Umbrella Regiment — design tokens Set data-theme on : "offseason" (default) | "warden" | "colonial". Resolve it server-side from the active war's faction, overridden by the user's stored preference. Six variables change; nothing else does. */ :root, [data-theme="offseason"] { --accent: #C8A24A; --on-accent: #0B0F13; --bg-base: #0B0F13; --bg-surface: #11161B; --bg-raised: #131920; --border: #222A31; --border-strong: #2C3742; } [data-theme="warden"] { --accent: #4D8FBE; --on-accent: #08131C; --bg-base: #0A1017; --bg-surface: #111C26; --bg-raised: #12202B; --border: #1E2F3D; --border-strong: #2A4256; } [data-theme="colonial"] { --accent: #93A559; --on-accent: #0D1109; --bg-base: #0D1109; --bg-surface: #151B10; --bg-raised: #181F11; --border: #26301C; --border-strong: #34411F; } /* Theme-independent. Text never changes with the theme. */ :root { --text-primary: #F2F4F6; --text-body: #C9D2D9; --text-secondary: #A9B3BB; --text-muted: #8B969F; --text-faint: #6F7A83; --text-dim: #5F6A73; /* Semantic — reserved meanings, never re-themed. A Warden row reads blue on the Colonial theme too. */ --faction-warden: #5B9FCC; --faction-colonial: #9BAB63; --state-ok: #5FA863; --state-warn: #D4A03C; --state-danger: #C07A5C; --highlight-self: #C8A24A; /* "this row is you" — gold on all themes */ --font-display: 'Oswald', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --radius-sm: 3px; --radius-md: 4px; --radius-phone: 14px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 14px; --space-5: 18px; --space-6: 22px; --space-7: 28px; --space-8: 40px; --shell-sidebar: 236px; --shell-topbar: 60px; --settings-rail: 238px; --tap-min: 44px; } html { background: var(--bg-base); } body { margin: 0; min-height: 100%; background: var(--bg-base); color: var(--text-secondary); font-family: var(--font-body); font-size: 14px; line-height: 1.6; } a { color: var(--accent); text-decoration: none; } a:hover { color: color-mix(in oklch, var(--accent) 80%, white); } * { box-sizing: border-box; } /* Type scale ---------------------------------------------------------- */ .t-hero { font-family: var(--font-display); font-weight: 600; font-size: 76px; line-height: 1; letter-spacing: .03em; color: var(--text-primary); } .t-h1 { font-family: var(--font-display); font-size: 40px; letter-spacing: .02em; color: var(--text-primary); } .t-h2 { font-family: var(--font-display); font-size: 30px; letter-spacing: .03em; color: var(--text-primary); } .t-h3 { font-family: var(--font-display); font-size: 21px; letter-spacing: .05em; color: var(--text-primary); } .t-page { font-family: var(--font-display); font-size: 19px; letter-spacing: .06em; color: var(--text-primary); } .t-metric { font-family: var(--font-display); font-size: 28px; color: var(--text-primary); } .t-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--text-muted); text-transform: uppercase; } .t-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-faint); } .t-num { font-family: var(--font-mono); font-size: 14px; } /* Mobile: hero and h1 step down. */ @media (max-width: 640px) { .t-hero { font-size: 38px; line-height: 1.02; } .t-h1 { font-size: 24px; } .t-h2 { font-size: 22px; } } /* Surfaces ------------------------------------------------------------ */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .card-raised { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md); } .card-hero { background: linear-gradient(135deg, #141B22 0%, #10151A 100%); border: 1px solid var(--border); border-radius: var(--radius-md); } .card-active { border-left: 2px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .row-self { background: var(--bg-raised); border-left: 2px solid var(--highlight-self); } /* Controls ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: 0 26px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; font-weight: 400; padding: 0 18px; } .pill { /* channel / role picker trigger */ font-size: 13px; color: var(--text-primary); background: #1E2731; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 12px; } .pill-empty { color: var(--text-faint); background: #171D24; border-style: dashed; } /* Drawn on a