/* Ski-AI design tokens — dark (default) + light. Drop-in for public/*.html: keeps the existing variable names (--bg, --panel, --panel2, --line, --text, --muted, --accent, --accent2, --ok, --bad) and adds the rest of the mock vocabulary. Switch theme with . Persist in localStorage('skiai-theme'). */ :root { color-scheme: dark; /* surfaces */ --bg-page: #04070f; /* behind the app frame */ --bg: #070b16; /* app background (globe / network sit on top) */ --bg-radial: radial-gradient(1200px 700px at 50% -10%, #0f1a3a 0%, #070b16 60%); /* pages without a map */ --panel: rgba(12,18,36,.84); /* glass panels: header, side panels, rails */ --panel-solid: rgba(12,18,36,.96); /* popovers, menus, omnibox results */ --panel2: rgba(20,29,56,.9); /* inset fields, nav pill track, secondary buttons */ --panel2-soft: rgba(20,29,56,.5); /* resort card / "who it suits" wells */ --tile: rgba(12,18,36,.75); /* stat tiles inside a well */ --line: rgba(120,150,220,.18); /* panel + field borders */ --line-strong: rgba(120,150,220,.22); /* button borders */ --line-row: rgba(120,150,220,.14); /* list row dividers */ --line-dashed: rgba(120,150,220,.35); /* empty-state dashed boxes */ --track: rgba(120,150,220,.3); /* switch track (off) */ /* text */ --text: #e8edf7; --text-2: #c9d2e8; --muted: #8b97b5; /* accent */ --accent: #6ee7ff; --accent-hover: #9deeff; --on-accent: #04121a; /* text on a filled accent button */ --accent-soft: rgba(110,231,255,.14); /* selected segment / toggle background */ --accent-line: rgba(110,231,255,.55); /* selected toggle border */ --accent-focus: rgba(110,231,255,.7); /* focused input border */ --accent-ring: rgba(110,231,255,.12); /* focused input outer ring */ --accent-glow: #6ee7ff; /* glow dots, map selection ring */ --chip-bg: #1f2b4d; --chip-text: #6ee7ff; /* resort chips inside answers */ --cite-bg: #1f2b4d; --cite-text: #a78bfa; /* [1] citations, source badges */ --accent2: #a78bfa; /* external-site links (niseko.ne.jp ↗) */ /* status */ --ok: #4ade80; --ok-bg: #1f5130; --ok-text: #c6f6d5; --warn: #fbbf24; --warn-bg: rgba(251,191,36,.06); --warn-line: rgba(251,191,36,.35); --bad: #f87171; --bad-bg: rgba(248,113,113,.12); --bad-line: rgba(248,113,113,.45); --ok-soft: rgba(74,222,128,.14); --ok-line: rgba(74,222,128,.5); /* avalanche danger 1–5 */ --d1-bg: #1f5130; --d1-text: #c6f6d5; --d2-bg: #5a4b12; --d2-text: #fef3c7; --d3-bg: #6b3a12; --d3-text: #ffedd5; --d4-bg: #6e1f1f; --d4-text: #fee2e2; --d5-bg: #000000; --d5-text: #ffffff; --d0-bg: #223333; --d0-text: #c9d2e8; /* data */ --bar: linear-gradient(90deg, #6ee7ff, #ffffff); /* leaderboard snow bars */ --bar-vertical: linear-gradient(180deg, #ffffff, #6ee7ff); /* 7-day forecast columns */ --bar-history: linear-gradient(180deg, #ffffff, #a78bfa); /* current-season months */ --bar-trait: linear-gradient(90deg, #a78bfa, #6ee7ff); /* gear trait scores */ --ramp-snow: linear-gradient(90deg, #5f7fd0, #6ee7ff, #ffffff); --ramp-depth: linear-gradient(90deg, #3a4a75, #6ee7ff, #ffffff); --ramp-temp: linear-gradient(90deg, #ffffff, #6ee7ff, #3b82f6, #facc15, #f97316, #ef4444); --run-green: #22c55e; --run-blue: #3b82f6; --run-black: #1f2937; --run-expert: #000000; --run-border: #555566; --lift: #ef4444; --placeholder-stripe: repeating-linear-gradient(135deg, #0f1a3a 0 8px, #0b1330 8px 16px); /* elevation */ --shadow: 0 10px 40px rgba(0,0,0,.35); --shadow-pop: 0 14px 40px rgba(0,0,0,.5); --shadow-frame: 0 24px 80px rgba(0,0,0,.55); --blur: blur(14px); /* type */ --font: Inter, system-ui, sans-serif; --font-display: "Inter Tight", Inter, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* radii */ --r-panel: 16px; --r-control: 10px; --r-field: 9px; --r-pill: 6px; --r-chip: 999px; --r-sm: 8px; /* layout (1440 reference) */ --inset: 12px; --header-h: 54px; --content-top: 78px; /* 320px clipped the tab row, which measures 354px of content, and truncated resort names mid-word. The floor is that measurement plus the panel's own padding; it grows with the window and stops before it eats the map. */ --left-w: clamp(384px, 27vw, 460px); --left-w-web: 300px; --rail-w: 400px; --rail-w-web: 360px; } [data-theme="light"] { color-scheme: light; --bg-page: #e6ebf3; --bg: #f2f5fa; --bg-radial: radial-gradient(1200px 700px at 50% -10%, #dfe8fa 0%, #f2f5fa 60%); --panel: rgba(255,255,255,.84); --panel-solid: rgba(255,255,255,.97); --panel2: rgba(226,233,246,.9); --panel2-soft: rgba(226,233,246,.5); --tile: rgba(255,255,255,.75); --line: rgba(60,85,140,.18); --line-strong: rgba(60,85,140,.22); --line-row: rgba(60,85,140,.14); --line-dashed: rgba(60,85,140,.35); --track: rgba(60,85,140,.3); --text: #0b1220; --text-2: #3b4660; --muted: #5f6b86; --accent: #0e7490; --accent-hover: #155e75; --on-accent: #ffffff; --accent-soft: rgba(14,116,144,.12); --accent-line: rgba(14,116,144,.55); --accent-focus: rgba(14,116,144,.7); --accent-ring: rgba(14,116,144,.1); --accent-glow: rgba(14,116,144,.55); --chip-bg: #dff3f9; --chip-text: #0e7490; --cite-bg: #ede9fe; --cite-text: #6d28d9; --accent2: #6d28d9; --ok: #15803d; --ok-bg: #dcfce7; --ok-text: #166534; --warn: #b45309; --warn-bg: rgba(180,83,9,.06); --warn-line: rgba(180,83,9,.35); --bad: #b91c1c; --bad-bg: rgba(185,28,28,.1); --bad-line: rgba(185,28,28,.45); --ok-soft: rgba(21,128,61,.12); --ok-line: rgba(21,128,61,.5); --d1-bg: #dcfce7; --d1-text: #166534; --d2-bg: #fef3c7; --d2-text: #854d0e; --d3-bg: #ffedd5; --d3-text: #9a3412; --d4-bg: #fee2e2; --d4-text: #991b1b; --d5-bg: #111111; --d5-text: #ffffff; --d0-bg: #e5e7eb; --d0-text: #3b4660; --bar: linear-gradient(90deg, #0e7490, #7dd3fc); --bar-vertical: linear-gradient(180deg, #22b8f0, #0e7490); --bar-history: linear-gradient(180deg, #c4b5fd, #6d28d9); --bar-trait: linear-gradient(90deg, #6d28d9, #0e7490); --ramp-snow: linear-gradient(90deg, #c7d2fe, #22b8f0, #0e7490); --ramp-depth: linear-gradient(90deg, #dbe4f5, #22b8f0, #0e7490); --ramp-temp: linear-gradient(90deg, #e0f2fe, #22b8f0, #2563eb, #eab308, #f97316, #dc2626); --placeholder-stripe: repeating-linear-gradient(135deg, #dfe8fa 0 8px, #eaf0f9 8px 16px); --shadow: 0 10px 40px rgba(20,40,80,.12); --shadow-pop: 0 14px 40px rgba(20,40,80,.16); --shadow-frame: 0 24px 80px rgba(20,40,80,.18); } /* Legend / kind colours (Ski web). Pale ones darken in light mode so dots stay visible on white. */ :root { --kind-resort: #6ee7ff; --kind-brand: #a78bfa; --kind-media: #4ade80; --kind-weather: #f97316; --kind-community: #fbbf24; --kind-group: #c084fc; --kind-tech: #f472b6; --kind-guide: #93c5fd; --kind-creator: #facc15; --kind-shop: #34d399; --kind-avalanche: #38bdf8; --kind-pass: #fb7185; --kind-travel: #fde68a; --kind-social: #86efac; --fresh-week: #ffffff; --fresh-month: #6ee7ff; --fresh-season: #3b82f6; --fresh-older: #3a4a75; } [data-theme="light"] { --kind-resort: #0e7490; --kind-brand: #6d28d9; --kind-media: #15803d; --kind-weather: #f97316; --kind-community: #b45309; --kind-group: #9333ea; --kind-tech: #db2777; --kind-guide: #3b82f6; --kind-creator: #ca8a04; --kind-shop: #059669; --kind-avalanche: #38bdf8; --kind-pass: #e11d48; --kind-travel: #d97706; --kind-social: #16a34a; --fresh-week: #0e7490; --fresh-month: #0ea5e9; --fresh-season: #7dd3fc; --fresh-older: #cbd5e1; }