/* ═══ fidano-tokens.css ══════════════════════════════════════════════════ Fidano Designsprache · Token · v2.0 · 21.10.2026 (Design C hell + dunkel, Azad 21.10.2026 23:30 „Design Ultra geil! So umsetzen!“; Musterseite abgenommen 08.10.2026, 3D-Kacheln 09.10.2026, v1.2 nur Regeln) Gemeinsame Quelle für VP-Portal und Webseite. Regeln: REGELN.md. Basis: Fidano Styleguide März 2026 (Charline Berlin Design). Kennzeichnung: [CD] = Wert aus dem Styleguide, unverändert [Ableitung] = aus CD-Farbe abgeleitet (Fläche, Kontrast) [Ergänzung] = digitale Ergänzung außerhalb des CD, Azad entscheidet Hell = :root (wie das CD: heller Grund) und Startmodus für alle. Dunkel = [data-theme="dark"] am , nur nach eigener Wahl der Person, serverseitig oder vor dem ersten Zeichnen gesetzt. Kein prefers-color-scheme (Azad 08.10.2026). Kundenseiten des Portals, Dokumente und Mails: immer hell. Komponenten nutzen nur Rollen-Token, nie die Markenwerte direkt. Schrift: Albert Sans (OFL, selbst hosten) – Hausschrift, Azad 06.10. Umbruchpunkte (fest, weil CSS-Variablen in @media-Bedingungen nicht wirken): Handy: @media (max-width: 767px) – dort --rand: 16px Tablet: @media (max-width: 1023px) Breit: ab 1024px (Inhalt nutzt die volle Breite, v1.2) Änderungen v1.0 (08.10.2026, Ja von Azad): – --schrift-text nur Albert Sans + sans-serif; neu --schrift-mail – --star-text dunkel ausdrücklich Midnight (Verlauf ist in beiden Modi gleich) – neu --dialog-grund (::backdrop) und --glas-unschaerfe (Kopf, Handy-Leiste) – Chip-Ton „akzent“ = --akzent auf --akzent-flaeche (keine neuen Werte) – Umbruchpunkte als Kommentar (oben), Startmodus hell Änderungen v1.1 (09.10.2026, Azad: „B + 3D-Kacheln, sehr hübsch“, REGELN 3.15): – 3D-Kacheln: --tiefe-1 (Kachel) und --tiefe-2 (Kachel beim Anfassen) neu, mit Lichtkante, Wölbung, warmem Haarrand und warmem Schatten (Schattenfarbe = CD-Verlauf-Ende) – neu --tiefe-flaeche (Kachelfläche Weiß → Papier bzw. --flaeche-hoch → --flaeche), --tiefe-lichtkante, --tiefe-star (Lichtkante + --star-schein) und --tiefe-grund (Seitengrund unter Kacheln: hell Papierton --flaeche, dunkel Midnight) – --tiefe-0 und --tiefe-3 unverändert Änderungen v2.0 (21.10.2026, Azad: Design C hell + dunkel, REGELN 3.16–3.17): – ALLE bisherigen Token unverändert (Name und Wert). Webseite und Dokumente bleiben damit, wie sie sind. – NEU Oberflächen-Sprache C (nur Bildschirm, nie PDF/Druck/Mail – REGELN 3a): Lichtschein --schein-grund, --schein-1/2/3, --schein-flaeche, --raster Glas --glas, --glas-dicht, --glas-leicht, --glas-unschaerfe-kachel, --glas-kante, --glas-schatten, --glas-hover Leuchten --leuchten, --leuchten-ring, --leuchten-knopf, --leuchten-star, --leuchten-linie, --leuchten-symbol, --zahl-schein Verlauf --text-verlauf, --zahl-verlauf (nur Schrift ab 44 px), --leucht-verlauf (Fortschritt, Leuchtlinie) Farbkacheln --farbkachel-kupfer/-midnight/-independence, --farbkachel-text(-matt), --farbkachel-flaeche, --farbkachel-knopf(-text), --farbkachel-schatten, --farbkachel-kupfer-schatten Dunkles Feld --panel, --panel-kante, --panel-text, --panel-text-matt, --panel-akzent, --panel-linie, --panel-kreis, --weg-fertig-schein, --weg-jetzt-schein Foto --foto-schleier Größen --gr-mega, --gr-gruss, --gr-preis, --gr-spalte – Alle Werte nur aus CD-Farben (Midnight, Sand, Independence, Kupfer, Verlauf-Ende) und bestehenden Ableitungen (Grund tief, Papier, Karte dunkel, Fläche hoch, Text hell, Text matt dunkel, Akzent, Geld dunkel, Weiß). Keine fremde Farbe. */ :root { /* ── Marke [CD] – fest, beide Modi ── */ --fd-midnight: #111a32; /* [CD] Primär */ --fd-sand: #e3bc90; /* [CD] Primär */ --fd-independence: #383e5f; /* [CD] Sekundär */ --fd-kupfer: #a8654c; /* [CD] Sekundär, Matt Copper */ --fd-verlauf: linear-gradient(135deg, #e3bc90 0%, #936245 100%); /* [CD] nur Bildmarke, Claim, der eine Star */ /* ── Rollen · Hell ── */ --grund: #fffefb; /* [Ableitung] Weiß, kaum warm */ --grund-tief: #f8f4ee; /* [Ableitung] */ --flaeche: #f4efe8; /* [Ableitung] helle Karte */ --flaeche-hoch: #ffffff; /* Dialog, Hilfe */ --flaeche-tief: rgba(56, 62, 95, .05); --flaeche-glas: rgba(255, 254, 251, .78); --text: #111a32; /* [CD] Midnight · 16,5 : 1 */ --text-matt: #4a5068; /* [Ableitung] Independence dunkler · 7,6 : 1 */ --text-label: #62677d; /* [Ableitung] · 4,9 : 1 auf Karte */ --linie: rgba(17, 26, 50, .11); --linie-stark: rgba(17, 26, 50, .26); --akzent: #8c5240; /* [Ableitung] Kupfer für kleinen Text · 5,4 : 1 */ --akzent-gross: #a8654c; /* [CD] Kupfer – nur ab 24 px (Unterzeilen) */ --akzent-flaeche: rgba(227, 188, 144, .30); --akzent-rand: rgba(168, 101, 76, .40); --geld: #8c5240; /* [Ableitung] Kupfer = Geld */ --fokus: #a8654c; --knopf-haupt: #a8654c; /* [CD] Kupfer, gefüllt, Pille */ --knopf-haupt-hover: #936245; /* [CD] Verlauf-Ende */ --knopf-haupt-text: #ffffff; /* 4,5 : 1 */ --knopf-neben-rand: rgba(17, 26, 50, .34); --star-text: #111a32; /* [CD] Midnight auf --fd-verlauf: 9,74 : 1 am Sand-Ende, 3,35 : 1 am Ende #936245. Kleiner Text nur bis 70 % der Verlaufsdiagonale (dort ≥ 4,78 : 1), siehe REGELN 3.9 */ --dringend: #8c5240; /* dringend = Kupfer (kein Glut-Orange) */ --dringend-flaeche: #a8654c; --dringend-text: #ffffff; --dialog-grund: rgba(17, 26, 50, .45); /* [Ableitung] Midnight 45 % – Abdunkelung hinter Dialogen (::backdrop) */ --glas-unschaerfe: blur(14px); /* Unschärfe hinter --flaeche-glas (Kopf, Handy-Leiste), Wert der Musterseite */ /* ── Statusfarben [Ergänzung] – nur Portal, gedämpft, Azad entscheidet ── */ --status-ok: #2f6e52; --status-ok-flaeche: rgba(47, 110, 82, .09); --status-warnung: #85601c; --status-warnung-flaeche: rgba(133, 96, 28, .09); --status-fehler: #a3453a; --status-fehler-flaeche: rgba(163, 69, 58, .08); /* Chip-Ton „akzent“ (z. B. Notar) = color: var(--akzent) auf background: var(--akzent-flaeche), keine eigenen Token. Hell 4,78–5,27 : 1, dunkel 6,14–7,49 : 1 (je nach Untergrund). */ /* Info = Independence [CD], keine Ergänzung */ --info: #383e5f; --info-flaeche: rgba(56, 62, 95, .07); /* ── Tiefen (3D-Kacheln v1.1, REGELN 3.15) ── */ --tiefe-grund: var(--flaeche); /* [Ableitung] Seitengrund unter Kacheln: Papierton, Kacheln heben sich weiß ab */ --tiefe-flaeche: linear-gradient(158deg, #ffffff 0%, #fbf8f3 100%); /* [Ableitung] Kachelfläche Weiß → Papier */ --tiefe-lichtkante: inset 0 1px 0 rgba(255, 255, 255, 1); /* obere Lichtkante */ --tiefe-0: 0 0 0 1px var(--linie); /* flach: Haarlinie (Listen, gedämpfte Karten) */ --tiefe-1: var(--tiefe-lichtkante), inset 0 -14px 28px -18px rgba(147, 98, 69, .10), /* Wölbung unten */ 0 0 0 1px rgba(147, 98, 69, .10), /* warmer Haarrand */ 0 1px 2px rgba(17, 26, 50, .04), 0 14px 30px -12px rgba(147, 98, 69, .24); /* warmer Schlagschatten */ --tiefe-2: var(--tiefe-lichtkante), 0 0 0 1px rgba(168, 101, 76, .30), 0 2px 4px rgba(17, 26, 50, .05), 0 24px 46px -16px rgba(147, 98, 69, .34), 0 0 30px -8px rgba(168, 101, 76, .20); /* Kupferschein beim Anfassen */ --tiefe-3: 0 0 0 1px var(--linie), 0 30px 80px -28px rgba(17, 26, 50, .40); --star-schein: 0 18px 44px -22px rgba(147, 98, 69, .55); --tiefe-star: inset 0 1px 0 rgba(255, 255, 255, .45), var(--star-schein); /* Star: Lichtkante auf dem Verlauf (Verlauf unverändert) */ /* ── Schrift ── */ --schrift-text: 'Albert Sans', sans-serif; /* Hausschrift, nur generischer Rückfall (v1.0) */ --schrift-mail: 'Albert Sans', Arial, sans-serif; /* nur E-Mails: Mailprogramme laden keine Webschrift, Arial ist dort der Rückfall */ --schrift-titel: var(--schrift-text); --schrift-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* nur Codes und Kennungen */ --gewicht-text: 400; --gewicht-ui: 500; /* Referenzschnitt Medium: Knöpfe, Zahlen, Labels */ --gewicht-titel: 700; --sperrung-titel: -.025em; --sperrung-label: .14em; --gr-star: clamp(64px, 6.8vw, 104px); --zh-star: .95; --gr-display: clamp(40px, 5vw, 64px); --zh-display: 1.02; --gr-h1: clamp(28px, 3vw, 38px); --zh-h1: 1.1; --gr-h2: 24px; --zh-h2: 1.2; --gr-unterzeile: 24px; /* Kupfer, Regular – wie im CD */ --gr-titel: 19px; --zh-titel: 1.25; --gr-text: 15px; --zh-text: 1.55; --gr-klein: 13.5px; --zh-klein: 1.45; --gr-mikro: 12px; --zh-mikro: 1.35; --gr-label: .75rem; /* Versalien, nur Labels und Spaltenköpfe */ /* ── Abstände (4er-Raster) ── */ --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 20px; --a-6: 24px; --a-8: 32px; --a-10: 40px; --a-14: 56px; --a-20: 80px; --rand: 40px; /* Seitenrand; Handy (max-width: 767px) 16px */ /* ── Radien ── */ --r-klein: 8px; --r-innen: 14px; --r-karte: 22px; --r-rund: 999px; /* ── Bewegung ── */ --dauer-sofort: 120ms; /* Farbe */ --dauer-hover: 300ms; /* Hover an allem Klickbaren */ --hover-knopf: -3px; /* Hauptknopf hebt sich */ --hover-karte: -6px; /* klickbare Karte hebt sich */ --dauer-kurz: 200ms; /* Hilfe, Fokus, Haken */ --dauer-mittel: 350ms; /* Platz machen, Karte heben */ --dauer-lang: 600ms; /* Karte öffnen, Toast */ --dauer-buehne: 1100ms; /* Zahl zählt, Balken füllt */ --kurve-ruhig: cubic-bezier(.2, .8, .2, 1); /* ausrollen – Standard */ --kurve-feder: cubic-bezier(.2, 1.4, .3, 1); /* landen, abhaken */ --kurve-gleich: cubic-bezier(.4, 0, .2, 1); /* gleichmäßig: Fortschritt */ /* ── Oberflächen-Sprache C · hell (v2.0, REGELN 3.16) – nur Bildschirm, nie Dokumente/Mails ── */ --schein-grund: #f4efe8; /* = --flaeche, Papier unter dem Lichtschein */ --schein-1: rgba(227, 188, 144, .85); /* Sand-Licht oben links */ --schein-2: rgba(168, 101, 76, .40); /* Kupfer-Licht rechts */ --schein-3: rgba(56, 62, 95, .16); /* Independence-Tiefe unten */ --schein-flaeche: radial-gradient(900px 560px at 8% -60px, var(--schein-1), transparent 62%), radial-gradient(820px 620px at 98% 90px, var(--schein-2), transparent 62%), radial-gradient(900px 600px at 50% 100%, var(--schein-3), transparent 62%), var(--schein-grund); --raster: rgba(17, 26, 50, .055); /* feines 48-px-Raster im Kopfbereich, läuft nach unten aus */ --glas: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .58)); /* Glas-Kachel */ --glas-dicht: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .92)); /* Menüs, Trefferliste, Dialog, Glasfeld auf Foto */ --glas-leicht: rgba(255, 255, 255, .55); /* Zweitknopf, Werkzeugleiste, aktiver Reiter auf dem Schein */ --glas-unschaerfe-kachel: blur(22px) saturate(150%); --glas-kante: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(168, 101, 76, .20); --glas-schatten: 0 34px 60px -34px rgba(147, 98, 69, .55), 0 2px 6px rgba(17, 26, 50, .04); --glas-hover: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(168, 101, 76, .45), 0 30px 60px -26px rgba(147, 98, 69, .65), 0 0 34px -8px rgba(168, 101, 76, .35); --leuchten: 0 0 70px -14px rgba(168, 101, 76, .70); /* Leuchtsaum: Star, Suchfeld, dringende Karte (höchstens 4 je Ansicht) */ --leuchten-ring: 0 0 0 1px rgba(168, 101, 76, .55), 0 0 36px -6px rgba(168, 101, 76, .55); --leuchten-knopf: 0 0 26px -4px rgba(168, 101, 76, .85), inset 0 1px 0 rgba(255, 255, 255, .25); --leuchten-star: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 70px -14px rgba(168, 101, 76, .70), 0 40px 90px -30px rgba(168, 101, 76, .90); --leuchten-linie: drop-shadow(0 0 6px rgba(227, 188, 144, .95)); /* Diagrammlinie im dunklen Feld */ --leuchten-symbol: drop-shadow(0 0 5px rgba(168, 101, 76, .70)); --zahl-schein: 0 0 34px rgba(168, 101, 76, .30); --text-verlauf: linear-gradient(90deg, #111a32 30%, #8c5240 100%); /* Schrift ab 44 px: Midnight → --akzent, ≥ 3,7 : 1 im Lichtschein */ --zahl-verlauf: linear-gradient(180deg, #111a32 20%, #383e5f 100%); /* große Zahlen ab 44 px */ --leucht-verlauf: linear-gradient(90deg, #e3bc90, #a8654c); /* Fortschritt/Leuchtlinie (keine Schrift darauf) */ --farbkachel-kupfer: linear-gradient(150deg, #a8654c 0%, #936245 100%); /* nur die dringendste Handlung; Text nur volles Weiß (4,53–5,16 : 1) */ --farbkachel-midnight: linear-gradient(150deg, #111a32 0%, #383e5f 130%); --farbkachel-independence: linear-gradient(150deg, #383e5f 0%, #111a32 140%); --farbkachel-text: #ffffff; --farbkachel-text-matt: rgba(255, 255, 255, .82); /* nur auf Midnight/Independence (≥ 7,6 : 1), auf Kupfer volles Weiß */ --farbkachel-flaeche: rgba(255, 255, 255, .16); /* Chip/Kürzel auf der Farbkachel */ --farbkachel-knopf: #ffffff; --farbkachel-knopf-text: #111a32; --farbkachel-schatten: inset 0 1px 0 rgba(227, 188, 144, .30), 0 0 0 1px rgba(227, 188, 144, .18), 0 34px 60px -30px rgba(17, 26, 50, .65); --farbkachel-kupfer-schatten: 0 0 70px -14px rgba(168, 101, 76, .70), inset 0 1px 0 rgba(255, 255, 255, .30); --panel: linear-gradient(160deg, rgba(17, 26, 50, .95), rgba(24, 33, 61, .94)); /* dunkles Feld im Star, in beiden Modi dunkel */ --panel-kante: inset 0 1px 0 rgba(227, 188, 144, .25); --panel-text: #f5f3ee; /* ≥ 13 : 1 */ --panel-text-matt: #aeb2c2; /* ≥ 6,4 : 1 */ --panel-akzent: #e3bc90; /* Sand ≥ 8 : 1 */ --panel-linie: rgba(227, 188, 144, .18); --panel-kreis: #18213d; --weg-fertig-schein: 0 0 18px rgba(227, 188, 144, .60); --weg-jetzt-schein: 0 0 0 6px rgba(168, 101, 76, .35), 0 0 0 14px rgba(168, 101, 76, .14), 0 0 40px 4px rgba(227, 188, 144, .75); --foto-schleier: linear-gradient(180deg, transparent 55%, rgba(17, 26, 50, .55)); /* Text auf Foto nur im dunklen Teil oder auf Glas */ --gr-mega: clamp(76px, 9vw, 132px); /* Star-Zahl C (Handy 76 px) */ --gr-gruss: clamp(44px, 5.3vw, 76px); /* Gruß/Seitentitel C */ --gr-preis: clamp(56px, 7.8vw, 112px); /* Preis Objekt C */ --gr-spalte: clamp(44px, 5vw, 72px); /* Spaltenzahl Pipeline, große Kennzahl C */ color-scheme: light; } [data-theme="dark"] { --grund: #111a32; /* [CD] Midnight */ --grund-tief: #0c1327; /* [Ableitung] tiefer als Midnight */ --flaeche: #18213d; /* [Ableitung] dunkle Karte */ --flaeche-hoch: #1f2948; /* [Ableitung] */ --flaeche-tief: rgba(227, 188, 144, .05); --flaeche-glas: rgba(24, 33, 61, .72); --text: #f5f3ee; /* 15,6 : 1 */ --text-matt: #aeb2c2; /* 7,5 : 1 auf Karte */ --text-label: #8e93a8; /* [Ableitung] · 5,2 : 1 */ --linie: rgba(227, 188, 144, .16); --linie-stark: rgba(227, 188, 144, .34); --akzent: #e3bc90; /* [CD] Sand */ --akzent-gross: #e3bc90; --akzent-flaeche: rgba(227, 188, 144, .13); --akzent-rand: rgba(227, 188, 144, .36); --geld: #d4977b; /* [Ableitung] Kupfer hell · 6,4 : 1 */ --fokus: #e3bc90; --knopf-haupt: #a8654c; --knopf-haupt-hover: #936245; /* [CD] Verlauf-Ende, wie hell */ --knopf-haupt-text: #ffffff; --knopf-neben-rand: rgba(227, 188, 144, .45); --star-text: #111a32; /* [CD] Midnight wie hell – der Verlauf ändert sich nicht mit dem Modus */ --dringend: #d4977b; --status-ok: #86c4a5; --status-ok-flaeche: rgba(134, 196, 165, .11); --status-warnung: #d9b56f; --status-warnung-flaeche: rgba(217, 181, 111, .11); --status-fehler: #e8968a; --status-fehler-flaeche: rgba(232, 150, 138, .11); --info: #b9bdd0; /* [Ableitung] Independence aufgehellt */ --info-flaeche: rgba(185, 189, 208, .10); --dialog-grund: rgba(12, 19, 39, .72); /* [Ableitung] --grund-tief 72 % – Abdunkelung hinter Dialogen dunkel */ --tiefe-grund: var(--grund); /* Midnight bleibt Seitengrund */ --tiefe-flaeche: linear-gradient(158deg, #1f2948 0%, #18213d 100%); /* --flaeche-hoch → --flaeche */ --tiefe-lichtkante: inset 0 1px 0 rgba(227, 188, 144, .14); --tiefe-1: var(--tiefe-lichtkante), inset 0 -14px 28px -18px rgba(5, 8, 20, .45), 0 0 0 1px rgba(227, 188, 144, .10), 0 1px 2px rgba(5, 8, 20, .4), 0 16px 34px -16px rgba(5, 8, 20, .75); --tiefe-2: var(--tiefe-lichtkante), 0 0 0 1px rgba(227, 188, 144, .30), 0 24px 50px -18px rgba(5, 8, 20, .85), 0 0 34px -10px rgba(168, 101, 76, .35); --tiefe-3: inset 0 1px 0 rgba(227, 188, 144, .10), 0 0 0 1px rgba(5, 8, 20, .5), 0 50px 120px -30px rgba(0, 0, 0, .85); --star-schein: 0 24px 60px -24px rgba(168, 101, 76, .6); --tiefe-star: inset 0 1px 0 rgba(255, 255, 255, .45), var(--star-schein); /* ── Oberflächen-Sprache C · dunkel (v2.0, REGELN 3.16) ── */ --schein-grund: #0c1327; /* = --grund-tief */ --schein-1: rgba(168, 101, 76, .38); --schein-2: rgba(56, 62, 95, .85); --schein-3: rgba(227, 188, 144, .12); --schein-flaeche: radial-gradient(900px 560px at 8% -60px, var(--schein-1), transparent 62%), radial-gradient(820px 620px at 98% 90px, var(--schein-2), transparent 62%), radial-gradient(900px 600px at 50% 100%, var(--schein-3), transparent 62%), var(--schein-grund); --raster: rgba(227, 188, 144, .05); --glas: linear-gradient(160deg, rgba(56, 62, 95, .55), rgba(24, 33, 61, .35)); --glas-dicht: linear-gradient(160deg, rgba(31, 41, 72, .96), rgba(24, 33, 61, .94)); --glas-leicht: rgba(255, 255, 255, .04); --glas-kante: inset 0 1px 0 rgba(227, 188, 144, .28), 0 0 0 1px rgba(227, 188, 144, .14); --glas-schatten: 0 30px 60px -30px rgba(0, 0, 0, .90); --glas-hover: inset 0 1px 0 rgba(227, 188, 144, .35), 0 0 0 1px rgba(227, 188, 144, .40), 0 30px 60px -26px rgba(0, 0, 0, .90), 0 0 40px -8px rgba(227, 188, 144, .35); --leuchten: 0 0 80px -10px rgba(227, 188, 144, .55); --leuchten-ring: 0 0 0 1px rgba(227, 188, 144, .55), 0 0 40px -6px rgba(227, 188, 144, .45); --leuchten-star: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 80px -10px rgba(227, 188, 144, .55), 0 40px 90px -30px rgba(168, 101, 76, .90); --leuchten-linie: drop-shadow(0 0 6px rgba(227, 188, 144, .90)); --leuchten-symbol: drop-shadow(0 0 5px rgba(227, 188, 144, .80)); --zahl-schein: 0 0 28px rgba(227, 188, 144, .45); --text-verlauf: linear-gradient(90deg, #f5f3ee 40%, #e3bc90 100%); --zahl-verlauf: linear-gradient(180deg, #f5f3ee 30%, #e3bc90 100%); --farbkachel-kupfer: linear-gradient(160deg, rgba(168, 101, 76, .55), rgba(24, 33, 61, .45)); --farbkachel-midnight: var(--glas); --farbkachel-independence: var(--glas); --farbkachel-text: #f5f3ee; --farbkachel-text-matt: #aeb2c2; --farbkachel-flaeche: rgba(227, 188, 144, .13); --farbkachel-knopf: #a8654c; --farbkachel-knopf-text: #ffffff; --farbkachel-schatten: var(--glas-kante), var(--glas-schatten); --farbkachel-kupfer-schatten: inset 0 1px 0 rgba(227, 188, 144, .40), 0 0 0 1px rgba(227, 188, 144, .40), 0 0 50px -12px rgba(168, 101, 76, .80); --panel: rgba(12, 19, 39, .82); color-scheme: dark; }