/* ========================================================================== Skimtide UI tokens & layout ========================================================================== */ :root { --ink: #1b1f29; --ink-muted: #546171; /* `--ink-dim` used to be #7a8694 which failed WCAG AA on --bg-elev-2 * (contrast ~3.9:1). Darkened to pass AA for non-large text while * preserving a visible hierarchy step below --ink-muted. */ --ink-dim: #5c6775; /* (Glass Terminal, 2026-07-11) 4th text step — the "faint" tier for disabled / placeholder / decorative text ONLY (spec §1.2 --text-faint). Deliberately below AA for body text; never use it for reading copy. */ --ink-faint: #8a94a3; --bg: #fbfaf7; --bg-elev-1: #ffffff; --bg-elev-2: #f1eee7; /* (Glass Terminal, 2026-07-11) Recessed input-surface alias — the "well" a text field sinks into (search box, form inputs). Mirrors --bg-elev-2 in light; the dark block sinks it to --bg (#0b0f17) so fields read as carved BELOW the panel rather than raised. Semantic alias so components stop reaching for the raw surface value. */ --field-well: #f1eee7; --border: #e3dfd4; /* `--border-strong` used to be #c8c2b2 but failed WCAG 1.4.11 (non-text * contrast) against `--bg` (≈ 1.9:1 — below the 3:1 floor for UI * components). Darkened to #988c70 which gives ~3.2:1 on `--bg` while * preserving the warm-neutral character. Used for hover/focus borders * on inputs, selects, chips, map toolbar buttons, and as the default * border for medium-weight containers (tooltip, multi-select dropdown, * AI upsell input). */ --border-strong: #988c70; --accent: #c8231f; --accent-soft: rgba(200, 35, 31, 0.10); /* (Glass Terminal, 2026-07-11) Ink for text/icons that sit ON an accent fill (the primary CTA). Theme-agnostic white: white ink reads on the brand red in BOTH themes — in dark it's the accent BACKGROUND that is grounded toward --bg (see the dark .btn--primary override), never the ink, so #fff holds. Consumed as var(--on-accent, #fff) — the house on-accent convention. */ --on-accent: #fff; --warm: #d98700; --warm-soft: rgba(217, 135, 0, 0.14); /* (C6, 2026-07-07) Amber as TEXT on light surfaces. #d98700 as text on --bg is ≈2.6:1 (sub-AA); darkened to #a15f00 (≈4.6:1, passes AA for normal text). --warm itself stays #d98700 for FILLS/BORDERS/badges (large non-text areas where 3:1 suffices). Dark theme sets --warm-text = --warm (already bright enough on the dark palette — see the dark block). */ --warm-text: #a15f00; /* (audit #68) Semantic state tokens. Canonical values = the most-used existing literals: --positive from sentiment-pill/market-up (#1f9d55 x3), --negative from sentiment-pill/market-down (#d64545 x3). --warning was the amber alias (--warm) — Wave 2 darkened its LIGHT value for the 3:1 UI floor (see its own note below); dark still aliases --warm. (audit #69) --danger = the .btn--danger red (#c0392b x7) + its hover. (C6, 2026-07-07) light --positive darkened #1f9d55 → #157f43: as TEXT on --bg it went from ≈2.8:1 (sub-AA) to ≈4.6:1 (passes AA for normal text). Dark --positive (#46c97e) unchanged — already ~AA on the dark surfaces. */ --positive: #157f43; --negative: #d64545; /* (Glass Terminal Wave 2, 2026-07-12) CONTRAST FIX — the amber alias var(--warm) (#d98700) is only 2.71:1 on --bg, below the 3:1 non-text/UI floor (design_lint CONTRAST ERROR). Darkened hue-preserved to #c67a00 (same ~37deg amber, S100%; ~3.2:1 on --bg) so the semantic warning colour clears the floor for fills / borders / icons. --warning has NO consumer yet (forward-looking semantic token — design_lint TOKEN "defined but never referenced"), so this is a value-only correction with zero rendered-surface change. Dark keeps the bright amber via the [data-theme=dark] override below (var(--warm) = #f5b547 on the deep bg). */ --warning: #c67a00; --danger: #c0392b; --danger-hover: #a93226; /* (Glass Terminal, 2026-07-11) Danger tint SURFACE — the low-alpha red wash behind destructive/error regions (error banners, danger-zone cards). Kept as a token so surfaces stop hand-mixing color-mix(--danger …). Deeper in dark so the wash still registers on the near-black bg. */ --danger-soft: rgba(192, 57, 43, 0.10); /* (audit #75) AI-provider kind-badge brand colours, hoisted from the badge block (light-theme values here; dark below). Exact current literals. */ --badge-anthropic: #b85c00; --badge-openai: #00855a; --badge-gemini: #1a73e8; --link: #1a5fb4; /* (Glass Terminal Wave 2, 2026-07-12) Trade-flow direction hues — teal (export) / orange (import). Consumed by the country-profile trade bars (css/40-panel.css:434-435 via var(--trade-*, ) with these EXACT light fallbacks, so token == fallback = zero visual change). Light values are AA- legible fills on the light surfaces; dark values brighten for the deep bg. NOTE: the dark values below match the globe trade-arc literals in cesium-globe.js:2070-2071 exactly (#22d3ee / #fb923c), but the LIGHT values here (#0891b2 / #ea580c) DIFFER from that file's light arc literals (#0e7490 / #c2410c) — a pre-existing arc-vs-bar mismatch flagged for a later unify pass. (30-globe.css itself holds no export/import arc literal; the only trade colour there is the blue layer-toggle swatch #3987e5.) */ --trade-export: #0891b2; /* teal — exports */ --trade-import: #ea580c; /* orange — imports */ /* (audit C1) Surge accent — the pink used for breaking/surge signals (pulse dot, brief surge counts, watchlist surge delta). Same value in both themes: it reads correctly in dark per the audit. */ --surge: #ff2d78; /* (C6, 2026-07-07) Surge as TEXT on light: #ff2d78 is ≈3.41:1 on --bg (sub-AA for normal text). Darkened to #c81a5a (≈5.36:1) while staying unmistakably in the same magenta family. --surge itself keeps #ff2d78 for the pulse DOT / fills. Dark theme sets --surge-text = --surge (bright pink reads fine on the deep bg). */ --surge-text: #c81a5a; --map-land: #dcd6c6; --map-land-stroke:#fbfaf7; --map-hover: var(--warm); --map-selected: var(--accent); --map-sphere: radial-gradient(ellipse at center, #eeeae0 0%, #fbfaf7 100%); /* Continent tints (very low saturation pastels) — light theme */ --map-tint-na: hsl(18 22% 86%); --map-tint-sa: hsl(130 16% 85%); --map-tint-eu: hsl(255 18% 88%); --map-tint-as: hsl(45 28% 85%); --map-tint-af: hsl(28 30% 85%); --map-tint-oc: hsl(170 18% 86%); --map-tint-an: hsl(200 8% 88%); --tag-topic: #9b5a00; --tag-sector: #1a5fb4; --tag-religion: #6b46c1; --mark-bg: rgba(217, 135, 0, 0.35); --mark-fg: var(--ink); --masthead-bg: rgba(251, 250, 247, 0.82); --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.06), 0 0 0 1px var(--border) inset; --shadow-2: 0 10px 30px rgba(17, 24, 39, 0.08); /* (Glass Terminal, 2026-07-11) Elevation ladder extended: tier-3 popover / dropdown, tier-4 modal / command palette. --shadow-1/2 keep their EXACT prior values + semantics (14 existing use-sites untouched). */ --shadow-3: 0 16px 48px rgba(17, 24, 39, 0.14); --shadow-4: 0 28px 80px rgba(17, 24, 39, 0.22); /* (audit #74) Black scrim/shadow tints. Each token is the exact rgba(0,0,0,a) literal it replaces (theme-agnostic black). No existing --shadow-* token was an exact match to these, so they get their own scale. Named by alpha. */ --scrim-08: rgba(0, 0, 0, 0.08); --scrim-10: rgba(0, 0, 0, 0.10); --scrim-12: rgba(0, 0, 0, 0.12); --scrim-15: rgba(0, 0, 0, 0.15); --scrim-18: rgba(0, 0, 0, 0.18); --scrim-22: rgba(0, 0, 0, 0.22); --scrim-26: rgba(0, 0, 0, .26); --scrim-32: rgba(0, 0, 0, 0.32); --scrim-40: rgba(0, 0, 0, 0.4); --scrim-42: rgba(0, 0, 0, 0.42); --scrim-50: rgba(0, 0, 0, 0.5); --scrim-82: rgba(0, 0, 0, 0.82); /* (Glass Terminal, 2026-07-11) Toast top-edge sheen — the 1px inset white highlight that gives the inverse-solid toast its glassy lip. Theme-agnostic (the toast keeps an inverse fill in both themes, so a faint white lip reads on either). Consumed as var(--toast-sheen, rgba(255,255,255,0.12)). */ --toast-sheen: rgba(255, 255, 255, 0.12); /* (Glass Terminal, 2026-07-11) === Glass surface system =================== Four translucent tiers that float over the globe canvas. Each tier is a TRIO: · --glass-N-bg translucent fill (used WITH backdrop-filter) · --glass-N-fallback opaque fill (no backdrop-filter support, OR prefers-reduced-transparency: reduce) · --glass-N-blur backdrop blur radius (length; theme-agnostic, so defined once here and inherited by the dark block) Shared edges: --glass-highlight (inset top 1px), --glass-hairline (1px border), --glass-sat (saturate boost). Light theme = white-frost; the dark block overrides only the colour tokens to a deep blue-black tint. RULE: never nest backdrop-filter — tier-2 (card tint) has blur 0, tint only; children of a glass surface use tint, not their own blur. */ --glass-sat: 140%; --glass-highlight: rgba(255, 255, 255, 0.85); --glass-hairline: rgba(17, 24, 39, 0.10); --glass-1-bg: rgba(255, 255, 255, 0.72); /* panels / dock / topbar */ --glass-1-fallback: #ffffff; --glass-1-blur: 16px; --glass-2-bg: rgba(255, 255, 255, 0.50); /* card tint (NO blur) */ --glass-2-fallback: var(--bg-elev-1); --glass-2-blur: 0px; --glass-3-bg: rgba(255, 255, 255, 0.88); /* popover / dropdown / tip */ --glass-3-fallback: #ffffff; --glass-3-blur: 20px; --glass-4-bg: rgba(255, 255, 255, 0.94); /* modal / command palette */ --glass-4-fallback: #ffffff; --glass-4-blur: 24px; --font-serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* (Glass Terminal, 2026-07-11) Pretendard Variable prepended before Inter: it carries the premium Hangul face while its Latin metrics track Inter, so mixed ko/en lines stay even. Inter still leads for pure-Latin rendering on systems where Pretendard's subset misses a glyph. Loaded non-blocking in every page . */ --font-sans: "Pretendard Variable", "Inter", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Display wordmark font for the "Skimtide" logotype and its tagline. Playfair Display is an elegant high-contrast serif that ships with a true 700 weight on Google Fonts — important because the wordmark is rendered bold, and faux-bolding a thin display serif looks smeared. Georgia fallback keeps the silhouette consistent if the webfont hasn't loaded yet. */ --font-wordmark: "Playfair Display", "Source Serif 4", Georgia, "Palatino Linotype", serif; /* (Glass Terminal, 2026-07-11) Monospace data face — indices, tickers, timestamps, coordinates, kbd. JetBrains Mono is loaded in every page ; ui-monospace / SFMono / Menlo / Consolas fall back per-OS. Pair with font-variant-numeric: tabular-nums on numeric surfaces. */ --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* (C7, 2026-07-07) Micro sub-tokens below --text-xs (12px). --text-2xs = 11px absorbs the 11px + 10.5px literals (half-pixels killed); --text-3xs = 10px the 10px literals. For dense metadata / legends / earbrows only. */ --text-3xs: 0.625rem; /* 10px */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.3125rem; /* (audit #70) --text-2xl was referenced with a `, 28px` fallback (globe overlay title) but never defined. Defined here at the exact fallback literal so the rendered size is unchanged. */ --text-2xl: 28px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* D1 (2026-07-07) — globe overlay alignment grid. Every absolutely-positioned overlay on the full-viewport hero shares ONE grid line per edge: the gutter for the four edges, and --globe-top for the top row (which snaps below the floating topbar). The topbar is position:fixed at top:--sp-3 (12px) and is a single ~56px row on the slim globe bar, so its bottom edge sits at ~68px; --globe-top = that + one gutter = 84px. Intentional vertical stacks (geo above reset, brief below the dock) are expressed as calc() off these tokens rather than raw literals, so the whole rail stays on the grid. */ --globe-gutter: 16px; --globe-topbar-h: 56px; --globe-top: calc(var(--sp-3) + var(--globe-topbar-h) + var(--globe-gutter)); /* Horizontal gutter for the full-width header/banner and the 1480px content column. Uses 8% of viewport width so the page breathes on large monitors; clamp() keeps it sane on phones and ultra-wide. */ --sp-page-x: clamp(20px, 8vw, 160px); /* (audit #71) z-index ladder. Tokens map 1:1 to the EXISTING raw values in the sheet — no layer moves. Grouped by stratum; the raw numbers are kept verbatim so this is a pure rename. Collisions (two different strata that happen to share a number) are flagged at their use sites, not "fixed". In-hero globe overlays share a shallow 1-16 band: */ --z-globe-base: 1; /* cmdk inner panel, globe base surfaces */ --z-globe-1: 2; /* map tooltip */ --z-globe-2: 3; /* map zoom hint, globe profile tip */ --z-globe-3: 5; /* globe pills/panel/legends/layers */ --z-globe-4: 6; /* globe tips, data-layers, dock, ctrl-hint */ --z-globe-brief: 16; /* globe brief flyout */ --z-float: 20; /* topbar float */ --z-sheet: 30; /* country sheet / globe-panel overlay */ --z-dropdown: 40; /* menu dropdowns, msel panel, overlay backdrop */ --z-dropdown-over: 41; /* dock overlay (just above the sheet+backdrop) */ --z-masthead: 50; /* sticky masthead + anon-gate scrim */ --z-fab: 900; /* floating feedback button */ --z-modal-under: 950; /* feedback modal (under the generic modal) */ --z-modal: 1000;/* generic modal + toast (collision: see use sites) */ --z-cmdk: 1100;/* command palette */ --z-overlay-top: 9999;/* theme-fade overlay + lightbox */ --z-skip-link: 10000;/* skip-link must beat everything */ /* (Glass Terminal, 2026-07-11) Radii re-pointed to the spec §1.4 3-step scale 6/10/14 (was 4/8/12-ish): 6px controls (chips/buttons/inputs), 10px cards, 14px panels/modals. --r-lg unchanged. Propagates to ~76 use-sites; fully round shapes (avatars/dots/pills at 999px|50%) are unaffected. */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --ease: cubic-bezier(0.2, 0, 0, 1); /* Springy overshoot easing — the country-sheet slide-up (~4034). Slight * >1 end control point gives a gentle settle. Kept as its own token so the * one spring in the sheet reads intentionally, not as a stray literal. */ --ease-spring: cubic-bezier(0.22, 0.9, 0.28, 1.05); /* (Glass Terminal, 2026-07-11) Spec §1.5 easings. --ease-out = decelerate (panel/popover ENTRY); --ease-in-out = symmetric (MOVE / resize). Existing --ease / --ease-spring keep their meaning; adopt these incrementally. */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Motion duration scale (design-system §7). Theme-agnostic. The global * prefers-reduced-motion block (transition-duration:0 / animation:none) * already neutralises motion for reduced-motion users, so no per-token * zeroing is needed here. Adopt across components incrementally. */ /* (Glass Terminal, 2026-07-11) Re-tuned to the spec §1.5 scale 140/200/280 (was 120/180/260) for a slightly more substantial, premium feel. Still neutralised globally by the prefers-reduced-motion block. */ --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 280ms; /* (Glass Terminal, 2026-07-11) W#13 — theme-fade crossfade duration. Re-pointed 900ms -> 360ms: the old dip-to-black held the user in darkness ~2s round-trip (fade + hold + fade) which read as a stall, not a premium touch. 360ms per leg keeps a perceptible crossfade while staying snappy. Sole consumer is .theme-fade-overlay (below); MUST stay in lockstep with app.js THEME_FADE_MS (each fade leg) so the class-swap timing matches the CSS. */ --dur-dramatic: 360ms; /* C5 — unified keyboard focus ring. A 2px surface-coloured gap then a 2px * accent ring = a crisp double-ring that reads on any background. References * theme tokens, so it adapts automatically in dark mode. Adopted by the * global :focus-visible baseline and non-inset component rings; inset rings * (tab strips) and SVG-node focus keep `outline` since box-shadow can't inset. */ --focus-ring: 0 0 0 2px var(--bg-elev-1), 0 0 0 4px var(--accent); color-scheme: light; } /* ----- Theme toggle — dip-to-black overlay --------------------------------- toggleTheme() drops a full-viewport black overlay into the page and fades its opacity 0→1 (≈360ms), swaps data-theme while the overlay is opaque, then fades the overlay 1→0 (≈360ms). We animate ONLY opacity, which the compositor handles on the GPU — so no jank even on slow machines, unlike the previous approach of transitioning per-element background/colour. ----------------------------------------------------------------------- */ .theme-fade-overlay { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; /* never blocks clicks */ z-index: var(--z-overlay-top); transition: opacity var(--dur-dramatic) var(--ease); /* Hint to the compositor so the layer is prepared once, up-front. */ will-change: opacity; } .theme-fade-overlay.is-active { opacity: 1; } [data-theme="dark"] { --ink: #f2efe8; --ink-muted: #a8a79e; /* Dark-mode parallel to the light-mode dim darken: the old value lost * contrast against --bg-elev-2 for stats/labels/placeholders. */ --ink-dim: #949489; /* (Glass Terminal, 2026-07-11) Dark 4th text step (faint tier) — disabled / placeholder / decorative only; sits below --ink-dim. */ --ink-faint: #6b7280; --bg: #0b0f17; --bg-elev-1: #121826; --bg-elev-2: #1a2235; /* (Glass Terminal, 2026-07-11) Recessed input-surface alias — sinks to --bg in dark so fields read carved BELOW the panel (deeper than --bg-elev-2). */ --field-well: #0b0f17; /* B6 (2026-07-07): strengthened #232c44 → #2e3a5a. The old value gave only * ≈1.20:1 vs --bg-elev-1 (#121826) — too weak to separate the dense rows the * new compact default produces. #2e3a5a reaches ≈1.51:1 vs elev-1 (~2.0:1 vs * --bg), the density-prerequisite the reviewer asked for, while keeping the * slate-blue hue. --border-strong (#556c95) stays ≈2.11:1 ABOVE the new * --border so the hierarchy still reads (bump not needed). */ --border: #2e3a5a; /* Dark-mode parallel to the light-mode darken: #30405f gave ≈1.9:1 * against --bg which fails WCAG 1.4.11. Brightened to #556c95 which * reaches ~3.6:1 while keeping the slate-blue hue of the dark palette. */ --border-strong: #556c95; --accent: #e63946; --accent-soft: rgba(230, 57, 70, 0.16); --warm: #f5b547; --warm-soft: rgba(245, 181, 71, 0.22); /* (C6) Dark amber text = the bright dark --warm; already legible on the deep surfaces, so no separate darkening needed (unlike light). */ --warm-text: #f5b547; /* (audit #68) Dark-theme semantic state tokens: canonical dark literals from the same components (#46c97e positive x2, #ff6b6b negative x2). --warning aliases --warm; --danger red (#c0392b) is theme-agnostic so it inherits the :root value. */ --positive: #46c97e; --negative: #ff6b6b; /* (Glass Terminal Wave 2) Re-assert the amber alias in dark: light darkened its --warning base to #c67a00 for the UI floor, so declare it here to keep dark on the bright var(--warm) (#f5b547), which already clears contrast on the deep bg. */ --warning: var(--warm); /* (Glass Terminal, 2026-07-11) Danger tint surface — deeper alpha than light so the red wash still registers on the near-black bg. --danger itself is theme-agnostic (inherits the :root #c0392b). */ --danger-soft: rgba(192, 57, 43, 0.16); /* (audit #75) Dark-theme AI-provider badge brand colours. Exact literals. */ --badge-anthropic: #f59e0b; --badge-openai: #22c55e; --badge-gemini: #60a5fa; --link: #8ab4ff; /* (Glass Terminal Wave 2) Dark trade hues — brighter teal/orange for the deep bg. These match the globe trade-arc dark literals (cesium-globe.js:2070-2071) exactly, so the profile trade bars and the globe arcs agree in dark theme. */ --trade-export: #22d3ee; --trade-import: #fb923c; /* (audit C1) Surge accent — same value as light; reads correctly in dark. */ --surge: #ff2d78; /* (C6) Dark surge text = the bright pink; legible on the deep dark bg. */ --surge-text: #ff2d78; --map-land: #1f2841; --map-land-stroke:#0b0f17; --map-sphere: radial-gradient(ellipse at center, #1a2235 0%, #0b0f17 100%); /* Continent tints (low saturation, deep tone) — dark theme */ --map-tint-na: hsl(18 14% 20%); --map-tint-sa: hsl(130 12% 19%); --map-tint-eu: hsl(255 14% 22%); --map-tint-as: hsl(45 16% 20%); --map-tint-af: hsl(28 18% 20%); --map-tint-oc: hsl(170 12% 19%); --map-tint-an: hsl(200 8% 20%); --tag-topic: var(--warm); --tag-sector: var(--link); --tag-religion: #c5a8ff; --mark-bg: rgba(245, 181, 71, 0.35); --mark-fg: var(--ink); --masthead-bg: rgba(11, 15, 23, 0.82); --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px var(--border) inset; --shadow-2: 0 6px 24px rgba(0,0,0,0.45); /* (Glass Terminal, 2026-07-11) Dark elevation tiers 3/4 — deeper, softer shadows read on the near-black bg. */ --shadow-3: 0 16px 48px rgba(0,0,0,0.55); --shadow-4: 0 32px 90px rgba(0,0,0,0.65); /* (Glass Terminal, 2026-07-11) Dark glass = deep blue-black tint tracking the --bg / --bg-elev ramp. Only the COLOUR tokens are overridden; the blur lengths + --glass-sat are inherited from :root. */ --glass-highlight: rgba(255, 255, 255, 0.06); --glass-hairline: rgba(255, 255, 255, 0.08); --glass-1-bg: rgba(18, 24, 38, 0.72); --glass-1-fallback: #121826; --glass-2-bg: rgba(26, 34, 53, 0.50); --glass-2-fallback: #1a2235; --glass-3-bg: rgba(18, 24, 38, 0.86); --glass-3-fallback: #161d2e; --glass-4-bg: rgba(13, 18, 28, 0.93); --glass-4-fallback: #121826; /* (Glass Terminal Wave 2, 2026-07-12) Dark toast sheen. The dark-theme .toast keeps its INVERSE fill — background var(--ink) which in dark is the LIGHT cream #f2efe8 — so the :root white-0.12 sheen is invisible on that near-white chip. Raise the top-lip highlight to white 0.5 so it reads as a faint glossy edge on the light chip (0.5 over #f2efe8 lands ~#f8f7f4, a perceptible bright line) — the dark-theme equivalent of the 0.12 lip on the light theme's dark chip. Same box-shadow consumer (css/10-base.css:564), no markup change. */ --toast-sheen: rgba(255, 255, 255, 0.5); color-scheme: dark; }