/* ========================================================================== Design Tokens — 世足戰情站 2026 FIFA World Cup 2026 official vibe: deep FIFA navy ground + tri-host gradient sweep (RED · GOLD · GREEN) with trophy-gold as primary accent. Theme-aware: dark (default) + light. Toggle via [data-theme] on . ========================================================================== */ :root { /* ---------- Core Palette (theme-agnostic) ---------- */ --color-red: #e10e20; --color-red-soft: #ff3346; --color-red-deep: #a30916; --color-green: #00c269; --color-green-soft: #19e08a; --color-green-deep: #00824a; --color-gold: #fcd34d; --color-gold-soft: #ffe79a; --color-gold-deep: #b88404; --color-blue: #0e1f4d; --color-blue-soft: #3c64c2; --color-blue-deep: #050d24; /* ---------- Semantic Aliases ---------- */ --color-primary: var(--color-gold); --color-secondary: var(--color-blue); --color-success: var(--color-green); --color-warning: var(--color-gold); --color-danger: var(--color-red); --color-info: var(--color-blue); --color-accent: var(--color-green); /* ---------- Signature gradient (2026 tri-host: USA·CAN·MEX) ---------- */ --gradient-2026: linear-gradient(90deg, #e10e20 0%, #fcd34d 50%, #00c269 100%); --gradient-2026-soft: linear-gradient(90deg, rgba(225,14,32,.18), rgba(252,211,77,.18), rgba(0,194,105,.18)); --gradient-2026-radial: radial-gradient(circle at 50% 0%, rgba(252,211,77,.18), transparent 60%); /* ---------- Typography ---------- */ --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Anton", "Noto Sans TC", system-ui, sans-serif; --font-mono: "Inter", "JetBrains Mono", ui-monospace, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: clamp(2rem, 4vw, 3rem); --fs-4xl: clamp(2.5rem, 6vw, 4.5rem); --fs-display: clamp(3rem, 9vw, 6.5rem); --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.6; --lh-loose: 1.8; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* ---------- Spacing (4pt scale) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* ---------- Radius ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* ---------- Layout ---------- */ --container-max: 1240px; --container-narrow: 880px; --container-pad: clamp(1rem, 4vw, 2rem); --nav-height: 68px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 480ms; /* ---------- z-index ---------- */ --z-nav: 50; --z-overlay: 80; --z-modal: 100; /* ---------- Accent glows (palette-driven) ---------- */ --glow-red: 0 0 24px rgba(225, 14, 32, 0.35); --glow-green: 0 0 24px rgba(0, 194, 105, 0.35); --glow-gold: 0 0 24px rgba(252, 211, 77, 0.45); --glow-blue: 0 0 24px rgba(14, 31, 77, 0.45); --glow-tricolor: 0 0 32px rgba(252, 211, 77, 0.28); } /* ========================================================================== DARK THEME (default) — deep FIFA navy ground ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --color-bg: #06112c; --color-bg-elevated: #0b1a3d; --color-surface: #0f2148; --color-surface-2: #15295a; --color-surface-3: #1c3370; --color-border: #243a6e; --color-border-strong:#3a548f; --color-text: #f1f3f9; --color-text-muted: #a4afc7; --color-text-dim: #6b779a; /* Navy ink on gold/green accent fills */ --color-on-accent: #0e1f4d; /* Sticky header overlay (semi-transparent variant of --color-bg) */ --color-header-bg: rgba(6, 17, 44, 0.85); /* Body radial-gradient glow stack — gold/red/green over navy */ --bg-glow-red: rgba(225, 14, 32, 0.10); --bg-glow-green: rgba(0, 194, 105, 0.08); --bg-glow-blue: rgba(252, 211, 77, 0.07); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55); } /* ========================================================================== LIGHT THEME — warm stadium-paper cream + deep FIFA navy ink ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --color-bg: #f3f1e7; --color-bg-elevated: #ffffff; --color-surface: #ffffff; --color-surface-2: #ebe6d4; --color-surface-3: #ddd5bb; --color-border: #d8d2bd; --color-border-strong:#b6ad8d; --color-text: #0e1f4d; --color-text-muted: #4d5666; --color-text-dim: #7a8294; --color-on-accent: #0e1f4d; --color-header-bg: rgba(243, 241, 231, 0.88); --bg-glow-red: rgba(225, 14, 32, 0.07); --bg-glow-green: rgba(0, 194, 105, 0.07); --bg-glow-blue: rgba(252, 211, 77, 0.07); --shadow-sm: 0 1px 2px rgba(14, 31, 77, 0.08); --shadow-md: 0 6px 18px rgba(14, 31, 77, 0.10); --shadow-lg: 0 18px 48px rgba(14, 31, 77, 0.14); } /* Honour OS preference when user has not chosen explicitly */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --color-bg: #f3f1e7; --color-bg-elevated: #ffffff; --color-surface: #ffffff; --color-surface-2: #ebe6d4; --color-surface-3: #ddd5bb; --color-border: #d8d2bd; --color-border-strong:#b6ad8d; --color-text: #0e1f4d; --color-text-muted: #4d5666; --color-text-dim: #7a8294; --color-on-accent: #0e1f4d; --color-header-bg: rgba(243, 241, 231, 0.88); --bg-glow-red: rgba(225, 14, 32, 0.07); --bg-glow-green: rgba(0, 194, 105, 0.07); --bg-glow-blue: rgba(252, 211, 77, 0.07); --shadow-sm: 0 1px 2px rgba(14, 31, 77, 0.08); --shadow-md: 0 6px 18px rgba(14, 31, 77, 0.10); --shadow-lg: 0 18px 48px rgba(14, 31, 77, 0.14); } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }