/* ========================================================================== RIVALZ — Design Tokens Layer 1: Primitives → Layer 2: Semantic → Layer 3: Component Brand: Pitch Lime on Ink. Dark is the home turf, light is fully supported. ========================================================================== */ :root { /* ---------- Layer 1: Primitive palette ------------------------------- */ /* Lime — brand core. Floodlit grass. */ --lime-50: #E8FFF3; --lime-100: #C2FFE0; --lime-200: #8AFFC7; --lime-300: #4DFCAB; --lime-400: #00E57A; /* signature */ --lime-500: #00C96B; --lime-600: #00A85A; --lime-700: #008548; --lime-800: #026639; --lime-900: #04492A; --lime-950: #032D1B; /* Gold — XP, trophies, rank */ --gold-200: #FFE9A8; --gold-300: #FFD86B; --gold-400: #FFC53D; /* signature */ --gold-500: #F0AE10; --gold-600: #C88A05; --gold-700: #9A6A04; --gold-800: #7A5303; /* Coral — streaks, live, urgency */ --coral-300: #FF8DA1; --coral-400: #FF4D6D; /* signature */ --coral-500: #EE2D51; --coral-600: #C81D3D; --coral-700: #A11430; /* Sky — secondary data accent, "neu"-Badges */ --sky-300: #7DD8FF; --sky-400: #38BDF8; --sky-500: #0EA5E9; --sky-600: #0284C7; /* Ink — green-shifted neutrals so the lime never floats off-palette */ --ink-0: #FFFFFF; --ink-25: #FAFCFB; --ink-50: #F4F7F5; --ink-100: #EBF0ED; --ink-200: #DCE4DF; --ink-300: #C2CDC7; --ink-400: #8F9C95; --ink-500: #66736C; --ink-600: #47534D; --ink-700: #2E3833; --ink-800: #1B2320; --ink-850: #141B18; --ink-900: #0E1412; --ink-950: #080C0A; /* page floor */ /* Papier — warme Neutraltoene, NUR fuer das helle Thema. ------------------------------------------------------------------ Die ink-Leiter darueber ist gruenstichig, damit das Lime auf Schwarz nicht aus der Palette faellt. Auf einer hellen Seite kippt derselbe Gruenstich ins Klinische: ein Grau, das ein bisschen nach Krankenhaus aussieht. Warme Neutraltoene tragen Gold und Lime besser und lassen das Weiss der Karten wirklich weiss aussehen — auf gruenlichem Grund tut es das nicht, es sieht nur unentschieden aus. Gemessen gegen die weisse Karte: 100 -> 1,15 · 300 -> 1,56 · 500 -> 4,57 · 600 -> 8,07 · 950 -> 18,82. */ --paper-0: #FFFFFF; --paper-25: #FCFAF6; --paper-50: #F8F5EE; --paper-100: #F3EFE6; /* Seitengrund im hellen Thema */ --paper-200: #E8E2D5; --paper-300: #D6CEBD; --paper-400: #A9A18E; --paper-500: #7C7566; --paper-600: #574F42; --paper-700: #3A342B; --paper-800: #262119; --paper-900: #191510; --paper-950: #14110D; /* Schrift im hellen Thema */ --red-400: #F87171; --red-500: #EF4444; --red-600: #DC2626; /* ---------- Layer 1: Type scale -------------------------------------- Fluid via clamp(): mobile floor → desktop ceiling, no media queries. */ --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; --text-xs: 0.75rem; /* 12 — labels/badges only, never body */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 — body floor */ --text-lg: 1.125rem; /* 18 */ --text-xl: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 2rem); --text-3xl: clamp(1.75rem, 1.43rem + 1.6vw, 2.625rem); --text-4xl: clamp(2.125rem, 1.55rem + 2.9vw, 3.75rem); --text-5xl: clamp(2.625rem, 1.6rem + 5.1vw, 5.5rem); --text-6xl: clamp(3rem, 1.3rem + 8.5vw, 7.5rem); --leading-tight: 1.04; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tighter: -0.045em; --tracking-tight: -0.022em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-widest: 0.15em; /* ---------- Layer 1: Spacing ------------------------------------------ */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Liegt als padding-block an, wirkt zwischen zwei Abschnitten also doppelt. Vorher lief das auf 224 px Leerlauf bei 1440 px hinaus — auf dem dunklen Hintergrund las sich das als Loch zwischen den Bereichen. Geaendert ist nur das obere Ende (7rem -> 5.5rem) und der Anstieg (7vw -> 4.6vw). Der untere Wert bleibt bei 3.5rem, und durch den flacheren Anstieg greift er jetzt bis rund 660 px Breite statt bis 390 px: Auf dem Handy aendert sich dadurch nichts, dort waeren 56 px auch nicht zu viel. Eng wird es nur, wo vorher zu viel Platz war. */ --space-section: clamp(3.5rem, 1.6rem + 4.6vw, 5.5rem); /* ---------- Layer 1: Radius, motion, layout --------------------------- */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-2xl: 36px; --radius-full: 999px; --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 380ms; --dur-slower: 620ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --container: 1320px; --container-md: 900px; --container-sm: 680px; --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem); /* Fixed chrome heights — layout maths references these, never magic numbers */ --header-h: 60px; --tabbar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-tabbar: 210; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================================== Layer 2: Semantic — LIGHT Lime stays vivid in both modes; text always sits on near-black, so the CTA contrast ratio (~12:1) is identical light and dark. ========================================================================== */ :root, :root[data-theme='light'] { color-scheme: light; /* ------------------------------------------------------------------------ WARUM DAS HELLE THEMA EIGENE FARBEN HAT UND NICHT DIE DUNKLEN AUF WEISS Gemessen, Thema gegen Thema, dieselbe Frage jeweils: dunkel hell (vorher) Text auf der Karte 16,7 19,7 ok gedaempfter Text 6,3 8,0 ok Karte gegen Seitengrund 1,09 1,15 ok Lime als FLAECHE gegen den Grund 11,7 1,46 <-- tot Gold als SCHRIFT 11,4 1,58 <-- tot Lime als SCHRIFT 10,7 4,7 <-- schwach Die Neutraltoene waren nie das Problem. Das ganze Markensystem lebt davon, dass leuchtende Farben auf Fast-Schwarz GLUEHEN — und auf Weiss tun dieselben Farben das Gegenteil: #00E57A und ein heller Grund sind fast gleich hell, ein Lime-Knopf hatte dort keine Praesenz. Der dunkle Modus bekam sein Leben aus den Akzenten, der helle hatte dieselben Akzente und deshalb kein Leben. Das ist mit Nachjustieren nicht zu beheben, deshalb zwei Entscheidungen: 1. WARMES PAPIER statt gruenlichem Grau (siehe --paper-* oben). 2. EIGENE AKZENTLEITER. Jede Signalfarbe hat hier zwei Rollen, und die muessen auseinander: --color-primary die FLAECHE — bleibt leuchtend, traegt dunkle Schrift (--color-on-primary) --color-primary-text die MARKE — Schrift, Symbol, Linie, Punkt: die tiefe Fassung Im dunklen Thema fallen beide zusammen, dort leuchtet beides. Hier nicht. Wer eine Signalfarbe als Schrift oder Linie einsetzt, nimmt die -text-Fassung; das steht auch so in den Regeln, die sie benutzen. ------------------------------------------------------------------------ */ /* Flaechen. Der Grund ist NICHT weiss — er war ink-25 (#FAFCFB) neben Karten in ink-0 (#FFFFFF), gemessen 1,03 Kontrast. Das ist kein schwacher Unterschied, das ist gar keiner. Jetzt 1,15, dazu kraeftigere Raender und sichtbare Schatten: Die Karte ist an drei Merkmalen zu erkennen statt an keinem. "subtle" bleibt HELLER als der Grund, "inset" wird tiefer — dieselbe Richtung wie im dunklen Thema (dort liegt bg-subtle ink-900 ueber bg ink-950). Andersherum sah eine Fortschrittsspur bei null aus wie eine volle. */ --color-bg: var(--paper-100); --color-bg-subtle: var(--paper-50); --color-bg-inset: var(--paper-200); --color-surface: var(--paper-0); --color-surface-raised: var(--paper-0); --color-surface-hover: var(--paper-50); /* Schrift in warmen Neutraltoenen, sonst steht ein gruenliches Grau auf warmem Papier und beides wirkt schmutzig. Gemessen gegen die Karte: fg 18,8 · muted 8,1 · subtle 4,6. Das dunkle Thema liegt bei 16,7 / 6,3 / 3,6 — hell ist hier durchweg eine Spur besser. */ --color-fg: var(--paper-950); --color-fg-muted: var(--paper-600); --color-fg-subtle: var(--paper-500); --color-fg-inverse: var(--paper-0); --color-border: var(--paper-300); --color-border-strong: var(--paper-400); --color-border-subtle: rgba(38, 33, 25, 0.10); /* FLAECHE leuchtend, MARKE tief. Siehe der Block ganz oben. WIE TIEF, entscheidet die DUNKELSTE helle Flaeche, nicht die weisse Karte. Es gibt drei: Karte #FFFFFF, Papier #F3EFE6 und der vertiefte Fond #E8E2D5. lime-700 haette auf der Karte 4,72 — auf dem Fond nur 3,66, und auf dem Papier 4,11. Eine Marke, die nur auf einer der drei Flaechen haelt, ist keine. Gemessen, Karte / Papier / Fond: lime-800 #026639 7,09 / 6,18 / 5,49 gold-800 #7A5303 6,85 / 5,97 / 5,31 coral-700 #A11430 7,90 / 6,88 / 6,12 */ --color-primary: var(--lime-400); --color-primary-hover: var(--lime-500); --color-primary-soft: var(--lime-50); --color-on-primary: var(--ink-950); --color-primary-text: var(--lime-800); --color-accent: var(--gold-400); --color-accent-hover: var(--gold-500); --color-accent-soft: #FFF4DC; --color-on-accent: var(--ink-950); --color-accent-text: var(--gold-800); --color-hot: var(--coral-400); --color-hot-soft: #FFEAEE; --color-hot-text: var(--coral-700); --color-info: var(--sky-400); --color-info-soft: #E3F3FD; --color-success: var(--lime-800); --color-danger: var(--red-600); --color-ring: var(--lime-800); /* Warm getoente Schatten. Ein neutralgrauer Schatten auf warmem Papier sieht aus wie Schmutz; er muss aus derselben Familie kommen wie der Grund. Und kraeftiger als vorher (0,05 war unsichtbar): Der Schatten ist das dritte Merkmal, an dem eine Karte sich loest. */ --shadow-xs: 0 1px 2px rgba(38, 33, 25, 0.07); --shadow-sm: 0 1px 3px rgba(38, 33, 25, 0.10), 0 1px 2px rgba(38, 33, 25, 0.06); --shadow-md: 0 4px 12px rgba(38, 33, 25, 0.12), 0 2px 4px rgba(38, 33, 25, 0.07); --shadow-lg: 0 12px 28px rgba(38, 33, 25, 0.16), 0 4px 10px rgba(38, 33, 25, 0.08); --shadow-xl: 0 28px 60px rgba(38, 33, 25, 0.20), 0 10px 22px rgba(38, 33, 25, 0.10); --shadow-glow: 0 10px 34px rgba(0, 168, 90, 0.30); --grad-brand: linear-gradient(112deg, var(--lime-400) 0%, var(--lime-500) 40%, var(--sky-400) 120%); --grad-gold: linear-gradient(112deg, var(--gold-300) 0%, var(--coral-400) 110%); --grad-fade: linear-gradient(180deg, transparent, var(--color-bg)); --grad-scrim: linear-gradient(to top, rgba(20,17,13,0.92) 0%, rgba(20,17,13,0.55) 42%, transparent 78%); --grad-mesh: radial-gradient(58% 52% at 10% 4%, rgba(0, 168, 90, 0.16), transparent 68%), radial-gradient(48% 48% at 92% 18%, rgba(2, 132, 199, 0.11), transparent 68%), radial-gradient(62% 58% at 52% 98%, rgba(200, 138, 5, 0.10), transparent 68%); --glass-bg: rgba(255, 255, 255, 0.80); --glass-border: rgba(38, 33, 25, 0.09); --pitch-line: rgba(38, 33, 25, 0.06); --rank-outline: rgba(38, 33, 25, 0.20); /* Das Bild hinter der Bühne. Im hellen Thema ein Sonnenaufgang statt des Sonnenuntergangs: dasselbe Stadion, anderes Licht (siehe tools/bauen/hero-sonnenaufgang.py). Als Token, damit die drei Stellen, die das Bild einsetzen — Bühnenhintergrund, Tages-Kachel und der Entwurfsbogen — nicht je zwei Fassungen brauchen. */ --hero-bild: url('../assets/hero-bg-dawn.jpg'); } /* ========================================================================== Layer 2: Semantic — DARK (home turf) ========================================================================== */ :root[data-theme='dark'] { color-scheme: dark; --color-bg: #0F1613; --color-bg-subtle: #151D19; --color-bg-inset: rgba(0, 0, 0, 0.26); --color-surface: #19221E; --color-surface-raised: #202A25; --color-surface-hover: #28332D; --color-fg: #EEF3F0; --color-fg-muted: #A6B2AB; --color-fg-subtle: #7D8A82; --color-fg-inverse: var(--ink-950); --color-border: rgba(255, 255, 255, 0.11); --color-border-strong: rgba(255, 255, 255, 0.21); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-primary: var(--lime-400); --color-primary-hover: var(--lime-300); --color-primary-soft: rgba(var(--marke-rgb), 0.18); --color-on-primary: var(--ink-950); --color-primary-text: var(--lime-300); --color-accent: var(--gold-400); --color-accent-hover: var(--gold-300); --color-accent-soft: rgba(255, 197, 61, 0.18); --color-on-accent: var(--ink-950); --color-accent-text: var(--gold-300); --color-hot: var(--coral-400); --color-hot-soft: rgba(255, 77, 109, 0.15); --color-hot-text: var(--coral-300); --color-info: var(--sky-400); --color-info-soft: rgba(56, 189, 248, 0.14); --color-success: var(--lime-400); --color-danger: var(--red-400); --color-ring: var(--lime-400); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.48), 0 2px 5px rgba(0, 0, 0, 0.35); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.52), 0 5px 12px rgba(0, 0, 0, 0.4); --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.62), 0 12px 26px rgba(0, 0, 0, 0.45); --shadow-glow: 0 12px 44px rgba(var(--marke-rgb), 0.30); --grad-brand: linear-gradient(112deg, var(--lime-400) 0%, var(--lime-300) 40%, var(--sky-400) 130%); --grad-gold: linear-gradient(112deg, var(--gold-300) 0%, var(--coral-400) 110%); --grad-fade: linear-gradient(180deg, transparent, var(--color-bg)); --grad-scrim: linear-gradient(to top, rgba(4,7,6,0.95) 0%, rgba(4,7,6,0.6) 44%, transparent 80%); --grad-mesh: radial-gradient(58% 52% at 10% 4%, rgba(var(--marke-rgb), 0.20), transparent 66%), radial-gradient(48% 48% at 92% 18%, rgba(56, 189, 248, 0.16), transparent 66%), radial-gradient(62% 58% at 52% 98%, rgba(255, 197, 61, 0.12), transparent 66%); --glass-bg: rgba(14, 20, 18, 0.72); --glass-border: rgba(255, 255, 255, 0.10); --pitch-line: rgba(255, 255, 255, 0.045); --rank-outline: rgba(255, 255, 255, 0.20); --hero-bild: url('../assets/hero-bg.jpg'); } /* System preference when the user hasn't chosen explicitly. Mirrors the dark block so an explicit [data-theme] always wins both ways. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-bg: #0F1613; --color-bg-subtle: #151D19; --color-bg-inset: rgba(0, 0, 0, 0.26); --color-surface: #19221E; --color-surface-raised: #202A25; --color-surface-hover: #28332D; --color-fg: #EEF3F0; --color-fg-muted: #A6B2AB; --color-fg-subtle: #7D8A82; --color-fg-inverse: var(--ink-950); --color-border: rgba(255, 255, 255, 0.11); --color-border-strong: rgba(255, 255, 255, 0.21); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-primary: var(--lime-400); --color-primary-hover: var(--lime-300); --color-primary-soft: rgba(var(--marke-rgb), 0.18); --color-primary-text: var(--lime-300); --color-accent: var(--gold-400); --color-accent-hover: var(--gold-300); --color-accent-soft: rgba(255, 197, 61, 0.18); --color-accent-text: var(--gold-300); --color-hot: var(--coral-400); --color-hot-soft: rgba(255, 77, 109, 0.15); --color-hot-text: var(--coral-300); --color-info: var(--sky-400); --color-info-soft: rgba(56, 189, 248, 0.14); --color-success: var(--lime-400); --color-danger: var(--red-400); --color-ring: var(--lime-400); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.48), 0 2px 5px rgba(0, 0, 0, 0.35); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.52), 0 5px 12px rgba(0, 0, 0, 0.4); --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.62), 0 12px 26px rgba(0, 0, 0, 0.45); --shadow-glow: 0 12px 44px rgba(var(--marke-rgb), 0.30); --grad-brand: linear-gradient(112deg, var(--lime-400) 0%, var(--lime-300) 40%, var(--sky-400) 130%); --grad-scrim: linear-gradient(to top, rgba(4,7,6,0.95) 0%, rgba(4,7,6,0.6) 44%, transparent 80%); --grad-mesh: radial-gradient(58% 52% at 10% 4%, rgba(var(--marke-rgb), 0.20), transparent 66%), radial-gradient(48% 48% at 92% 18%, rgba(56, 189, 248, 0.16), transparent 66%), radial-gradient(62% 58% at 52% 98%, rgba(255, 197, 61, 0.12), transparent 66%); --glass-bg: rgba(14, 20, 18, 0.72); --glass-border: rgba(255, 255, 255, 0.10); --pitch-line: rgba(255, 255, 255, 0.045); --rank-outline: rgba(255, 255, 255, 0.20); --hero-bild: url('../assets/hero-bg.jpg'); } }