/* ========================================================================== MyStats / Nukleus – Design-Tokens, Version 2 (Stil des H.E.R.O. Interface) Nur CSS-Variablen. ALLE Farben sind ausschließlich hier definiert. Dunkel ist der Standard und braucht kein Attribut. Hell ist eine Variante, die nur über data-theme="light" erscheint (an oder an jedem Element). Die Systemeinstellung wird nicht befolgt: Das Design ist als dunkle Oberfläche gedacht, Hell ist ein bewusster Wechsel per Schalter. ========================================================================== */ /* ---- Unabhängig vom Theme: Schrift, Größen, Abstände, Radien, Übergänge ---- */ :root { /* Schrift: Titillium Web für allen Text. Orbitron nur für Wortmarke, Uhr und Level-Badge (Klasse .wordmark und .level__badge). Beide liegen lokal in fonts/, SIL Open Font License. */ --font-sans: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Orbitron", "Titillium Web", system-ui, sans-serif; --weight-normal: 400; --weight-semibold: 600; --weight-bold: 700; --weight-display: 800; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.75rem; --leading-tight: 1.25; --leading: 1.5; --tracking-wide: 0.16em; --tracking-display: 0.08em; /* Abstände */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* Radien */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-pill: 999px; /* Größen */ --size-control: 2.75rem; --size-level: 8.5rem; --size-glow: 0.5rem; --size-bracket: 1.25rem; --size-dot-grid: 30px; --border-width: 1px; --focus-width: 2px; --focus-offset: 2px; --opacity-disabled: 0.5; /* Übergänge (nur Rückmeldung, bei reduzierter Bewegung abgeschaltet) */ --transition-fast: 150ms ease; --transition-slow: 400ms ease; /* Farbe, die es nirgends sonst gibt: durchsichtig */ --color-clear: transparent; } /* ---- Dunkel (Standard) ---- */ :root, [data-theme="dark"] { --scheme: dark; /* Flächen und Linien */ --color-bg: #040914; --color-surface: #0c1a2f; --color-surface-deep: #070f1d; --color-surface-2: #11263c; --color-track: #17364c; --color-line: #1b4259; --color-border-input: #398ca7; /* Text */ --color-text: #eaf7ff; --color-text-2: #adc6dc; --color-text-3: #87a2ba; /* Blau ist in Version 2 Cyan: Akzent, Links, Linien, Avatar, Fokus */ --color-blue: #59e0ff; --color-blue-soft: #153248; --color-focus: #59e0ff; /* Gold */ --color-gold: #ffb627; --color-gold-hover: #ffd36e; --color-on-gold: #2a1a00; --color-gold-graphic: #ffb627; --color-gold-text: #ffd36e; --color-gold-soft: #2a2410; /* Grün (nur für Erledigt) */ --color-green-text: #3ff0b0; --color-green-soft: #113a30; /* Rot (neu in Version 2, für Fehler und Löschen; bis zur Freigabe unbenutzt) */ --color-danger-text: #ff8fa3; --color-danger-soft: #3a1a24; /* Akzente: Leuchten am Ring, Skalenstriche, Linie im Kartenkopf, Eckklammern, Leuchten an Cyan und Wortmarke */ --color-fx-glow: rgba(255, 182, 39, .55); --color-fx-tick: rgba(89, 224, 255, .55); --color-fx-hairline: rgba(89, 224, 255, .5); --color-fx-bracket: #59e0ff; --color-fx-glow-cyan: rgba(89, 224, 255, .35); --color-fx-wordmark-glow: rgba(255, 182, 39, .35); /* Seitenhintergrund: zwei weiche Lichtflecken und ein feines Punktraster */ --color-bg-glow-1: rgba(89, 224, 255, .13); --color-bg-glow-2: rgba(255, 182, 39, .08); --color-bg-dot: rgba(89, 224, 255, .08); /* Schatten */ --color-panel-highlight: rgba(255, 255, 255, .05); --shadow-card: 0 14px 44px rgba(0, 0, 0, .4); } /* ---- Hell (nur über data-theme="light") ---- */ [data-theme="light"] { --scheme: light; /* Flächen und Linien */ --color-bg: #eef4fb; --color-surface: #ffffff; --color-surface-deep: #f3f8fd; --color-surface-2: #e6f2fa; --color-track: #dfe9f1; --color-line: #c4dbe8; --color-border-input: #2f7d99; /* Text */ --color-text: #0b1a2e; --color-text-2: #35506a; --color-text-3: #4a6680; /* Blau (Cyan, für Hell abgedunkelt) */ --color-blue: #0072a3; --color-blue-soft: #e0f4fc; --color-focus: #0072a3; /* Gold */ --color-gold: #f0a000; --color-gold-hover: #d98f00; --color-on-gold: #2a1a00; --color-gold-graphic: #b56d00; --color-gold-text: #7a4a00; --color-gold-soft: #fff0cf; /* Grün (nur für Erledigt) */ --color-green-text: #0b7a52; --color-green-soft: #d8f3e7; /* Rot (neu in Version 2, bis zur Freigabe unbenutzt) */ --color-danger-text: #b3213a; --color-danger-soft: #fde3e8; /* Akzente */ --color-fx-glow: rgba(240, 160, 0, .35); --color-fx-tick: rgba(0, 114, 163, .45); --color-fx-hairline: rgba(0, 114, 163, .5); --color-fx-bracket: #0072a3; --color-fx-glow-cyan: rgba(0, 114, 163, .25); --color-fx-wordmark-glow: rgba(240, 160, 0, .25); /* Seitenhintergrund */ --color-bg-glow-1: rgba(0, 114, 163, .10); --color-bg-glow-2: rgba(240, 160, 0, .10); --color-bg-dot: rgba(0, 114, 163, .10); /* Schatten */ --color-panel-highlight: rgba(255, 255, 255, .6); --shadow-card: 0 12px 32px rgba(11, 26, 46, .10); }