/* Design tokens — extracted verbatim from marvel-united-v2_53.html */ :root { /* Tells the UA which palette native controls (date/time picker popups, scrollbars) should draw from — without this, #pl-date's calendar popup stays light-chrome even under :root[data-theme="dark"] below, mismatching every custom-styled control around it. Flipped to `dark` in the dark-theme block. */ color-scheme: light; /* ───────────────────────────────────────── BRAND PALETTE ───────────────────────────────────────── */ --color-red: #CC2936; --color-red-dark: #A01E2A; --color-orange: #B35C05; /* team-summary-weakness — true orange (hue ~30°) reads as caution, not the same alarm as red; kept dark/saturated enough to hold 4.5:1 on white */ --color-purple: #5B3FA6; --color-purple-dark: #4A3288; --color-green: #139353; --color-green-dark: #0E7541; /* was hardcoded on #add-to-team-btn:hover */ --color-hero-tag: #4BB8D6; /* was fully hardcoded; used on .team-tag */ --color-blue: #1D6FA5; /* readable heroes-nav accent; #4BB8D6 is ~2.3:1 on white, fails AA */ --color-villain-dark: #1A1A1A; /* was hardcoded on .card-tab-btn.villain-tab.active */ --color-favorite: #EE58A0; /* favorite-heart fill. Deliberately NOT red (already means "remove"/villain here) and NOT the heroic-color yellow (already means the Heroic specialty symbol) — a hero card favorited + specialized would otherwise show two things meaning different concepts in confusingly similar colors. */ --team-gold: #C9A227; /* matchup builder / Log Play: the Gold Team half of Team vs Team (paired with --color-blue), and no other role. Close in hue to --heroic-accent by necessity (gold IS the Gold Team's color) but the two are never adjacent in the same view, so they don't need to be more distinct than this. */ /* Action icon colors — keep exact names; referenced in JS data objects */ --fight-color: #ED1D24; --move-color: #7DAB3C; --heroic-color: #FFE777; --wild-color: #7B68EE; --heroic-accent: #C9B520; /* darker gold for accents — heroic-color is too pale on white */ /* Sort/filter panel surfaces */ --hairline: #EEF0F3; /* sub-label divider rule */ /* ───────────────────────────────────────── NEUTRAL SURFACE SCALE ───────────────────────────────────────── */ --color-white: #FFFFFF; --color-black: #000000; --color-off-white: #E4EAF0; --color-border: #C8CDD4; --color-ui-grey: #9AA0A8; --color-label-grey: #484848; /* ───────────────────────────────────────── TEXT COLORS ───────────────────────────────────────── */ --color-text-primary: #1A1A1A; /* unifies hardcoded #111 and #222 */ --color-text-secondary: #3D3D3D; /* unifies hardcoded #333 and #444 */ --color-text-muted: #555555; /* was hardcoded #555 on .ability-row */ /* ───────────────────────────────────────── SEMANTIC SURFACES Named by role, not by color. Light values below preserve today's look exactly; the [data-theme="dark"] block at the end of this file overrides them for dark mode. (Text/border/sunken roles reuse the neutral tokens above — those are overridden in dark directly. Only the white *surfaces* need a separate token, because plain white is also used as on-accent text and must stay white.) ───────────────────────────────────────── */ --surface-page: var(--color-white); /* body / page background */ --surface-card: var(--color-white); /* cards, detail panels */ --surface-raised: var(--color-white); /* header, popovers, toolbar, active nav pill */ /* ───────────────────────────────────────── DARK PANEL (card art backgrounds) ───────────────────────────────────────── */ --color-panel-dark: #1A1A2E; /* card bg + gradient start */ --color-panel-dark-2: #2D2D4E; /* gradient end */ /* ───────────────────────────────────────── ELEVATION / SHADOWS ───────────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(0,0,0,0.06); /* header hairline */ --shadow-sm: 0 2px 12px rgba(0,0,0,0.12); /* cards resting; absorbs the 0 8px 24px sort-panel near-duplicate */ --shadow-md: 0 2px 4px rgba(0,0,0,0.25); /* floating panels */ --shadow-lg: 0 8px 32px rgba(0,0,0,0.18); /* overlays, hover states */ --shadow-xl: 0 25px 60px rgba(0,0,0,0.40); /* deep modal (expansion overlay) */ --shadow-fab: 0 4px 20px rgba(46,158,91,0.40); /* team FAB green glow */ --shadow-pill: 0 1px 4px rgba(0,0,0,0.25); /* active nav tab pill */ --shadow-thumb: 3px 4px 4px rgba(0,0,0,0.30); /* offset card thumbnail shadow */ /* ───────────────────────────────────────── BORDER RADII ───────────────────────────────────────── */ --radius-sm: 6px; /* stat bar track */ --radius-md: 8px; /* buttons, search input, inputs */ --radius-lg: 10px; /* collection boxes, health/mode badges */ --radius-card: 12px; /* character cards */ --radius-thumb: 7px; /* card thumbnails, equip cards */ --radius-overlay: 16px; /* overlay panels */ --radius-pill: 999px; /* pill-shaped buttons; clamps to true stadium at any height */ --radius-full: 50%; /* circular controls */ /* ───────────────────────────────────────── SPACING SCALE (4px base grid) ───────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; /* main content horizontal gutter */ --space-panel: 30px; /* standard overlay panel padding */ --space-2-5: 10px; /* between space-2 and space-3 */ --space-7: 28px; /* detail overlay top padding */ --space-9: 36px; /* detail-bottom panel padding */ --space-fab-clear: 120px; /* bottom clearance for floating action button */ /* ───────────────────────────────────────── TYPOGRAPHY HELPERS ───────────────────────────────────────── */ --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif; --tracking-tight: 0.5px; /* default display tracking */ --tracking-wide: 1px; /* emphasized / all-caps labels */ /* ───────────────────────────────────────── LAYOUT CONTAINER ───────────────────────────────────────── */ --content-max: 1400px; /* shared max width: header, toolbar, grid */ --gutter: 56px; /* shared horizontal gutter */ /* ───────────────────────────────────────── TYPE SCALE ───────────────────────────────────────── */ --text-2xs: 9px; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; /* stat numbers — data display */ --text-3xl: 24px; /* detail overlay name */ --text-4xl: 28px; /* logo */ /* ───────────────────────────────────────── MOTION ───────────────────────────────────────── */ --transition: 0.2s ease; /* ───────────────────────────────────────── INFRASTRUCTURE ───────────────────────────────────────── */ --img-base: "http://192.168.0.140:8085"; /* ───────────────────────────────────────── LEGACY ALIASES — existing rules keep working unchanged during migration. Delete each line once the corresponding hardcoded reference has been updated. ───────────────────────────────────────── */ --white: var(--color-white); --off-grey: var(--color-off-white); --light-grey: var(--color-border); --mid-grey: var(--color-ui-grey); --dark-grey: var(--color-label-grey); --red: var(--color-red); --red-dark: var(--color-red-dark); --purple: var(--color-purple); --purple-dark: var(--color-purple-dark); --green: var(--color-green); --favorite: var(--color-favorite); --card-radius: var(--radius-card); --overlay-radius: var(--radius-overlay); --shadow: var(--shadow-sm); } /* ───────────────────────────────────────── DARK MODE Manual toggle only — set by js/theme-init.js (pre-paint) and the settings-panel toggle, which put data-theme="dark" on . Overrides the neutral surface/text/border tokens + brightens the brand UI accents. The symbol / action-icon colors (--fight-, --move-, --heroic-, --wild-, --heroic-accent) and the hero tag are deliberately NOT changed. ───────────────────────────────────────── */ :root[data-theme="dark"] { color-scheme: dark; /* Surfaces — page is the LIGHTER tone and raised (header/popovers) is the DARKER tone, inverted from a typical elevation scale. This is deliberate: .char-card's art-panel background (--color-panel-dark, #1A1A2E) is a fixed dark navy that doesn't participate in the surface-token system, so a dark --surface-page made the grid cards blend into the page with no visible edge. Lifting the page above the card's navy gives the cards a natural outline without adding a border to the cards themselves. */ --surface-page: #262626; --surface-card: #1E1E1E; --surface-raised: #121212; /* Neutral sunken fills + borders (consumed via --color-off-white / --off-grey, --color-border / --light-grey, --hairline throughout the CSS). */ --color-off-white: #2A2A2A; --color-border: #3A3A3A; --hairline: #2E2E2E; /* Text */ --color-text-primary: #ECECEC; --color-text-secondary: #C2C2C2; --color-text-muted: #A6A6A6; --color-label-grey: #C2C2C2; /* --dark-grey text; sf-pill.active bg repointed off this */ /* Brightened brand UI accents (buttons, active states, links). */ --color-purple: #8A73D8; --color-purple-dark: #6F5AC0; --color-red: #E24651; --color-red-dark: #C0333D; --color-orange: #FB9C3C; /* lighter than light-mode orange for contrast on dark surfaces; same ~30° hue */ --color-green: #1BAE68; --color-green-dark: #159457; --color-blue: #4BB8D6; /* light-mode #1D6FA5 is too dark on dark surfaces; original tag blue reads well here (~8:1) */ --color-favorite: #F667AC; /* brightened for contrast on dark surfaces, same hue as light mode */ --team-gold: #D9B23C; /* brightened for contrast on dark surfaces, same hue as light mode */ /* Shadows read as deeper wells against dark surfaces. */ --shadow-xs: 0 1px 4px rgba(0,0,0,0.40); --shadow-sm: 0 2px 12px rgba(0,0,0,0.50); --shadow-md: 0 2px 4px rgba(0,0,0,0.55); --shadow-lg: 0 8px 32px rgba(0,0,0,0.60); --shadow-xl: 0 25px 60px rgba(0,0,0,0.70); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }