/* ───────────────── Front of Heroes · Design tokens ───────────────── The single source of every colour, size, radius, shadow and timing in the game. Components and pages use these variables only; no hard-coded colours. Documented in docs/DESIGN.md. Themes: dark ("Night ops", the default) and light ("Briefing paper"). The theme is set on as data-theme="dark|light" (src/theme.rs). Any element can pin a theme for its subtree with the same attribute: the battlefield is always data-theme="dark". Cascade layers, lowest to highest priority. Unlayered CSS (battle.css) beats all of them. */ @layer tokens, base, components, pages, utilities; @layer tokens { /* ── Theme-independent ── */ :root { /* Type families. Inter for everything you read; Barlow Condensed for titles, numbers and call-to-action labels: a condensed, stencil-straight face that reads like military signage. */ --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Barlow Condensed", "Inter", "Arial Narrow", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* Type scale (16px root). Never go below --fs-xs. */ --fs-display: 3rem; /* 48 — hero numbers, country and battle names */ --fs-h1: 2.25rem; /* 36 — page title */ --fs-h2: 1.5rem; /* 24 — section title */ --fs-h3: 1.125rem; /* 18 — card title */ --fs-lg: 1.0625rem; /* 17 — reading text (articles, bios), lead paragraphs */ --fs-md: 0.9375rem; /* 15 — body and controls */ --fs-ui: 0.875rem; /* 14 — compact controls: tabs, menus, table cells */ --fs-sm: 0.8125rem; /* 13 — secondary text, hints, small buttons */ --fs-xs: 0.75rem; /* 12 — captions, overlines, badges */ --fs-stat: 1.75rem; /* 28 — numbers in stat tiles */ --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.55; --lh-read: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-display: .01em; --ls-caps: .08em; --ls-cta: .06em; /* Spacing: a 4px grid. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Radii: squared-off rather than bubbly. */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* Control heights. Touch targets are never below --h-md on phones. */ --h-sm: 32px; --h-md: 40px; --h-lg: 48px; --h-xl: 56px; /* Motion: it confirms, it never entertains. */ --t-fast: 120ms; --t-base: 180ms; --t-slow: 300ms; --ease: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* Layers. */ --z-nav: 40; --z-dropdown: 60; --z-sheet: 70; --z-modal: 80; --z-toast: 90; --z-tooltip: 100; /* Layout. */ --page-max: 960px; /* every page, cards included: the city fills the same margins everywhere */ --nav-max: 1320px; /* the top bar, wider: it holds the whole menu, the wallet and the account */ --page-pad: 24px; --gap: 20px; --tabbar-h: 64px; /* the phone tab bar, without the safe-area inset */ --nav-h: 61px; /* the top bar with its hairline (57px on phones) */ /* Brand and the two sides never change between themes as fills. */ --brand: #fad804; --brand-hover: #ffe14a; --brand-active: #e4c300; --brand-edge: #b89a00; --on-brand: #1d1700; --on-accent: #ffffff; /* Map colours (see DESIGN.md §World map). */ --map-sea: #0b1220; --map-land: #1c2433; --map-ocean: #0a2848; --space: #02040a; --atmo: #6fb6ff; --c0: #8fa7c9; --c1: #c9a98f; --c2: #9cc29a; --c3: #c99aab; --c4: #c2bb8a; --c5: #9ab8c2; --c6: #b29ac9; --c7: #c9b58f; --c8: #a3c9b5; --c9: #c9a0c0; --c10: #a9b0d6; --c11: #d0b79e; } /* ── Dark: "Night ops" ── */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #070b13; --backdrop-left: url("../assets/ui/city-night-left.webp"); --backdrop-right: url("../assets/ui/city-night-right.webp"); --backdrop-opacity: 1; --backdrop-blend: normal; /* Surfaces, from the page up. Cards are smoked glass. */ --surface-1: rgba(14, 21, 34, .9); /* cards (opaque enough to need no blur) */ --surface-2: rgba(255, 255, 255, .035); /* raised areas inside a card */ --surface-3: rgba(255, 255, 255, .065); /* hover / pressed fills */ --surface-raised: #1b2538; /* the selected segment, a lifted tile */ --surface-sunken: rgba(2, 5, 11, .5); /* inputs, wells, bar tracks */ --surface-overlay: #111a29; /* menus, popovers, modals, toasts */ --surface-nav: rgba(8, 12, 20, .84); --scrim: rgba(2, 5, 10, .66); --border-subtle: rgba(148, 163, 184, .1); --border: rgba(148, 163, 184, .17); --border-strong: rgba(148, 163, 184, .3); --text: #e9eef8; --text-2: #aab5c9; --text-3: #7f8aa1; --text-disabled: #525d72; --text-inverse: #0b1120; --brand-text: #fad804; --brand-soft: rgba(250, 216, 4, .12); --brand-border: rgba(250, 216, 4, .45); --logo-mark: #fad804; /* the logo's star (src/brand.rs) */ --focus: #fad804; --focus-ring: 0 0 0 3px rgba(250, 216, 4, .28); /* Meaning. Fill = buttons and bars; text = readable on any surface; soft = tinted backgrounds. */ --blue: #3aa0ff; --blue-text: #74bcff; --blue-soft: rgba(58, 160, 255, .14); --blue-deep: #0a2a5c; --red: #ff4b3a; --red-text: #ff8b7e; --red-soft: rgba(255, 75, 58, .14); --red-deep: #5c1410; --green: #22c55e; --green-text: #5fe08f; --green-soft: rgba(34, 197, 94, .14); --amber: #f59e0b; --amber-text: #ffbe5c; --amber-soft: rgba(245, 158, 11, .14); --gold: #ffd25a; --gold-text: #ffd25a; --gold-soft: rgba(255, 210, 90, .12); --lime: #84cc16; --lime-text: #a3e635; --lime-soft: rgba(132, 204, 22, .14); --ink: #050a14; --panel: rgba(8, 16, 30, .72); --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28); --shadow-2: 0 4px 10px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .45); --shadow-3: 0 10px 24px rgba(0, 0, 0, .45), 0 32px 80px rgba(0, 0, 0, .55); --highlight: inset 0 1px 0 rgba(255, 255, 255, .06); --art-shadow: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); /* game art (buildings, products, medals) */ /* Button skins. */ --btn-bg: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)); --btn-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06)); --btn-bg-active: rgba(255, 255, 255, .05); --btn-border: rgba(148, 163, 184, .26); --btn-disabled-bg: rgba(255, 255, 255, .04); --brand-glow: rgba(250, 216, 4, .55); /* Field skins. */ --input-bg: rgba(2, 5, 11, .45); --input-border: rgba(148, 163, 184, .22); --input-border-hover: rgba(148, 163, 184, .38); --input-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); --select-bg: #0e1522; } /* ── Light: "Briefing paper" ── */ [data-theme="light"] { color-scheme: light; --bg: #f7f8fb; --backdrop-left: url("../assets/ui/city-left.webp"); --backdrop-right: url("../assets/ui/city-right.webp"); --backdrop-opacity: .5; --backdrop-blend: multiply; /* the painting's white sky and fog take the page colour */ --surface-1: rgba(255, 255, 255, .94); --surface-2: #f6f8fb; --surface-3: #edf1f6; --surface-raised: #ffffff; --surface-sunken: #eef1f5; --surface-overlay: #ffffff; --surface-nav: rgba(255, 255, 255, .9); --scrim: rgba(15, 23, 42, .4); --border-subtle: rgba(15, 23, 42, .07); --border: rgba(15, 23, 42, .12); --border-strong: rgba(15, 23, 42, .22); --text: #0f172a; --text-2: #475569; --text-3: #64748b; --text-disabled: #a3adbd; --text-inverse: #f8fafc; --brand-text: #8a6a00; --brand-soft: #fff6c7; --brand-border: #e2bf00; --logo-mark: #c28a00; /* light-theme gold: still the brand yellow on paper */ --focus: #b38f00; --focus-ring: 0 0 0 3px rgba(224, 184, 0, .35); --blue: #1d6fd8; --blue-text: #1a5fb8; --blue-soft: #e7f0fd; --blue-deep: #0a2a5c; --red: #d92d20; --red-text: #b42318; --red-soft: #fdecea; --red-deep: #5c1410; --green: #16a34a; --green-text: #15803d; --green-soft: #e7f6ec; --amber: #d97706; --amber-text: #b45309; --amber-soft: #fef3e2; --gold: #c28a00; --gold-text: #9a6b00; --gold-soft: #fff4d6; --lime: #65a30d; --lime-text: #4d7c0f; --lime-soft: #eef7e1; --ink: #0b1120; --panel: rgba(255, 255, 255, .9); --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .06); --shadow-2: 0 2px 6px rgba(15, 23, 42, .08), 0 14px 34px rgba(15, 23, 42, .12); --shadow-3: 0 8px 20px rgba(15, 23, 42, .12), 0 28px 70px rgba(15, 23, 42, .2); --highlight: inset 0 1px 0 rgba(255, 255, 255, .9); --art-shadow: drop-shadow(0 6px 10px rgba(15, 23, 42, .18)); --btn-bg: linear-gradient(180deg, #ffffff, #f3f5f9); --btn-bg-hover: linear-gradient(180deg, #ffffff, #eaeef4); --btn-bg-active: #e6eaf1; --btn-border: rgba(15, 23, 42, .16); --btn-disabled-bg: #f1f3f7; --brand-glow: rgba(170, 130, 0, .35); --input-bg: #ffffff; --input-border: rgba(15, 23, 42, .18); --input-border-hover: rgba(15, 23, 42, .32); --input-shadow: inset 0 1px 2px rgba(15, 23, 42, .05); --select-bg: #ffffff; } /* ── Legacy aliases: older page CSS still uses these names. Do not use them in new code. ── Declared wherever a theme is, so a pinned subtree (the battlefield) resolves them in its theme. */ :root, [data-theme] { --surface: var(--surface-1); --line: var(--border); --txt: var(--text); --txt-strong: var(--text); --txt-soft: var(--text-2); --mute: var(--text-2); --radius: var(--r-lg); --font: var(--font-ui); --well: var(--surface-sunken); --hover: var(--surface-3); --pos: var(--lime-text); --neg: var(--red-text); --warn: var(--amber-text); --menu-bg: var(--surface-overlay); --nav-bg: var(--surface-nav); --tip-bg: var(--surface-overlay); --field-bg: var(--surface-sunken); --field-bg-hover: var(--surface-sunken); --field-border: var(--border); --nav-link: var(--text-2); } }