/* huahinrackets shared shell — three visual themes via CSS vars. Switch by setting . Default = forest. Architecture: the 7000-line templates use inline styles with hard-coded hex (#1a5040, #ffd673, #ffe8c4, etc). Theme-switching is done at CSS level via attribute-selector overrides that retarget every legacy hex to a var. The shell rules in this file are for the small set of base classes; everything else is handled by the overrides at the bottom. */ /* v3 (2026-06-20): all color values now sourced from the Tailwind v3 default palette (tested for WCAG AA contrast across hundreds of millions of sites). We picked specific shades per theme so contrast pairings are guaranteed: - dark themes use 900/950 surfaces with 50/100/300 text - light themes use 0/50 surfaces with 700/800 text - accents come from amber (forest), blue (material), orange (strava) Hex reference (no Tailwind dependency; values inlined): emerald-950 #022c22 emerald-900 #064e3b emerald-800 #065f46 emerald-700 #047857 emerald-300 #6ee7b7 amber-200 #fde68a amber-300 #fcd34d amber-400 #fbbf24 amber-50 #fffbeb slate-50 #f8fafc slate-100 #f1f5f9 slate-200 #e2e8f0 slate-300 #cbd5e1 slate-600 #475569 slate-700 #334155 slate-800 #1e293b slate-900 #0f172a blue-50 #eff6ff blue-600 #2563eb blue-700 #1d4ed8 neutral-900 #171717 neutral-800 #262626 neutral-950 #0a0a0a orange-50 #fff7ed orange-600 #ea580c orange-700 #c2410c red-300 #fca5a5 red-500 #ef4444 red-700 #b91c1c green-300 #86efac green-600 #16a34a green-700 #15803d */ /* ---------- forest (default) — emerald + amber, sport-club dark green ---------- */ :root, html[data-theme="forest"] { --bg: #022c22; /* emerald-950 */ --bg-card: #064e3b; /* emerald-900 */ --bg-card-hover: #065f46; /* emerald-800 */ --bg-header: #022c22; /* emerald-950 */ --border: #047857; /* emerald-700 */ --border-strong: #6ee7b7; /* emerald-300 — visible on dark surfaces */ --text: #fffbeb; /* amber-50 — warm cream over green */ --text-muted: rgba(255,251,235,.72); --accent: #fcd34d; /* amber-300 — gold */ --accent-ink: #022c22; /* emerald-950 for ink on accent */ --accent-soft: rgba(252,211,77,.14); --accent-soft-strong: rgba(252,211,77,.28); --danger: #fca5a5; /* red-300 — visible on dark */ --success: #86efac; /* green-300 — visible on dark */ --radius-card: 8px; --radius-button: 8px; --shadow-card: none; --font: system-ui; } /* ---------- material — slate surfaces, blue-600 accent ---------- */ html[data-theme="material"] { --bg: #f8fafc; /* slate-50 */ --bg-card: #ffffff; --bg-card-hover: #f1f5f9; /* slate-100 */ --bg-header: #ffffff; --border: #e2e8f0; /* slate-200 */ --border-strong: #cbd5e1; /* slate-300 */ --text: #1e293b; /* slate-800 */ --text-muted: #475569; /* slate-600 — AA-compliant against bg-card */ --accent: #2563eb; /* blue-600 — Material-ish blue */ --accent-ink: #ffffff; --accent-soft: rgba(37,99,235,.10); --accent-soft-strong: rgba(37,99,235,.18); --danger: #b91c1c; /* red-700 — needs to be dark on light bg */ --success: #15803d; /* green-700 */ --radius-card: 16px; --radius-button: 24px; --shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05); --font: 'Inter', system-ui, sans-serif; } /* ---------- strava — neutral-near-black with orange-600 accent ---------- */ html[data-theme="strava"] { --bg: #0a0a0a; /* neutral-950 */ --bg-card: #171717; /* neutral-900 */ --bg-card-hover: #262626; /* neutral-800 */ --bg-header: #000000; --border: #262626; /* neutral-800 */ --border-strong: #404040; /* neutral-700 */ --text: #ffffff; --text-muted: rgba(255,255,255,.65); --accent: #ea580c; /* orange-600 — Strava */ --accent-ink: #ffffff; --accent-soft: rgba(234,88,12,.12); --accent-soft-strong: rgba(234,88,12,.22); --danger: #ef4444; /* red-500 */ --success: #16a34a; /* green-600 */ --radius-card: 4px; --radius-button: 4px; --shadow-card: none; --font: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ---------- shell ---------- */ *{box-sizing:border-box} /* Body var bindings are !important so per-page