/* ════════════════════════════════════════════════════════════════════ LEX EUROPE · DESIGN TOKENS — single source of truth ──────────────────────────────────────────────────────────────────── "Intelligence Archive, Premium Tier" — 1960s Geheimdienst-Aktendeckel trifft modernes Lagezentrum. Tiefes Schwarz · gebrochenes Burgundy #c8102e · Amber #d4a030. Harte 2px-Archiv-Radien. Lesbarkeit vor Effekt. Faces (im der Seite laden): Cinzel (Display) · Inter (Body) · JetBrains Mono (Daten/HUD) https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600;700&display=swap Diese Datei definiert NUR Tokens + eine sichere Premium-Basisschicht (focus-visible, reduced-motion, Reveal/Lift-Utilities). Komponenten- klassen leben in lex-ui.css bzw. den Seiten — keine Kollisionen. ════════════════════════════════════════════════════════════════════ */ :root { /* ── NEUTRAL ELEVATION RAMP ────────────────────────────────────── Vorher flach (#0a0a0a/#101010/#161616). Jetzt echte Tiefe: Canvas tiefer, Panels heben sich messbar ab. */ --bg: #08080b; /* Canvas / tiefste Ebene */ --bg-1: #0d0d11; /* angehoben (Rails, Footer) */ --bg-2: #131319; /* Panel-Basis */ --bg-3: #1a1a22; /* Panel-Hover / Raised */ --bg-4: #23232e; /* Control / Active */ --panel: rgba(19,19,25,0.92); /* Rückwärtskompatible Aliase (bestehende Seiten nutzen diese Namen) */ --bg0: var(--bg); --bg1: var(--bg-1); --bg2: var(--bg-2); --bg3: var(--bg-3); /* ── ACCENT — gebrochenes Burgundy (Identität) ─────────────────── */ --accent: #c8102e; --accent-2: #8b0b20; /* tief */ --accent-warm: #e02040; /* heiß */ --accent-hi: #ff2a4d; /* Hover-Peak */ --accent-ink: #4a0812; /* dunkle Wäsche */ --accent2: var(--accent-2); --ag: rgba(200,16,46,0.12); --ag2: rgba(200,16,46,0.24); --ag3: rgba(200,16,46,0.40); /* Kühle Sekundär-Akzente (HUD/neutral) */ --accent-cool: #b6b6c0; --accent-cool2: #7a7a86; /* ── SEMANTISCHE SIGNALE ───────────────────────────────────────── */ --amber: #d8a83a; --amg: rgba(216,168,58,0.12); --green: #5fb583; --gg: rgba(95,181,131,0.14); --red: #e83850; --rdg: rgba(232,56,80,0.14); --blue: #5a8fc0; --violet: #7d6fc0; /* ── RISK-TIER (kanonische Taxonomie: lex/risk_tiers.py) ───────── Diese Werte spiegeln lex.risk_tiers.RISK_COLOR — bei Änderung BEIDE Stellen anfassen (die Karte färbt Knoten/Ketten danach ein). */ --risk-high: #d61f2b; /* High-Risk — Geld erreicht Gewaltakteur */ --risk-conduit: #b452ff; /* Conduit — Durchleiter/Drehscheibe */ --risk-opacity: #8a93a6; /* Opacity — Geld ohne Offenlegung */ --risk-monitored: #e8a01c; /* Monitored— Watchlist/wiederholt */ --risk-standard: #3f6fb0; /* Standard — Rest */ /* ── TEXT-HIERARCHIE (premium: nicht reinweiß) ─────────────────── */ --t0: #f6f6f8; /* Überschriften / High-emphasis */ --t1: #dcdce2; /* Fließtext */ --t2: #9c9ca6; /* Sekundär / Labels */ --t3: #62626c; /* Tertiär / Meta */ --t4: #3c3c44; /* Faintest / Hairline-Text / Disabled */ /* ── HAIRLINES / BORDERS ───────────────────────────────────────── */ --line: rgba(255,255,255,0.07); /* alias --pb */ --line-2: rgba(255,255,255,0.12); /* alias --pb2 */ --line-3: rgba(255,255,255,0.20); /* alias --pbs */ --pb: var(--line); --pb2: var(--line-2); --pbs: var(--line-3); --hud-line: rgba(200,16,46,0.30); --grid: rgba(255,255,255,0.022); --intel-grid: var(--grid); /* ── TYPE — FACES ──────────────────────────────────────────────── */ --serif: 'Cinzel', Georgia, 'Times New Roman', serif; --intel-serif: var(--serif); --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* ── TYPE — MODULARER SCALE (Basis 14px, ~1.2 minor third) ─────── */ --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 27px; --fs-3xl: 33px; --fs-4xl: clamp(38px, 5vw, 56px); --fs-display: clamp(44px, 6.5vw, 76px); --lh-tight: 1.08; --lh-snug: 1.28; --lh-base: 1.55; --lh-loose: 1.7; --tr-tighter: -0.03em; --tr-tight: -0.015em; --tr-normal: 0; --tr-wide: 0.04em; --tr-wider: 0.12em; --tr-eyebrow: 0.28em; /* mono Kicker / Klassifizierung */ --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; /* ── SPACING — 4px-Skala ───────────────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ── RADIEN — harte Archiv-Radien (Identität) ──────────────────── */ --r-1: 2px; --r-2: 3px; --r-3: 5px; --r-pill: 999px; --r: var(--r-1); /* ── ELEVATION — geschichtete Tiefe ────────────────────────────── */ --e-1: 0 1px 2px rgba(0,0,0,0.45); --e-2: 0 2px 6px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.03); --e-3: 0 8px 28px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.04); --e-4: 0 18px 48px rgba(0,0,0,0.68), inset 0 1px 0 rgba(255,255,255,0.05); --e-pop: 0 28px 70px rgba(0,0,0,0.76), 0 0 0 1px var(--line-2); --panel-shadow: var(--e-3); --glow: 0 0 10px rgba(200,16,46,0.45), 0 0 28px rgba(200,16,46,0.14); --glow-strong: 0 0 14px rgba(200,16,46,0.60), 0 0 40px rgba(200,16,46,0.22); --glow-amber: 0 0 10px rgba(216,168,58,0.40), 0 0 26px rgba(216,168,58,0.12); --intel-glow: var(--glow-strong); /* ── MOTION ────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 0.70, 0.20, 1.00); --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1.00); --ease-spring: cubic-bezier(0.20, 0.90, 0.25, 1.25); --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 560ms; /* ── Z-INDEX-SKALA ─────────────────────────────────────────────── */ --z-map: 0; --z-hud: 1; --z-panel: 10; --z-topbar: 50; --z-class: 120; --z-modal: 1000; --z-toast: 2000; /* ── LAYOUT ────────────────────────────────────────────────────── */ --maxw: 1480px; --gutter: var(--sp-4); --clsh: 22px; /* Höhe Klassifizierungs-Balken */ } /* ════════════════════════════════════════════════════════════════════ SICHERE PREMIUM-BASISSCHICHT — additiv, kollisionsarm ════════════════════════════════════════════════════════════════════ */ /* Tastatur-Fokus: präziser Burgundy-Ring (nur Keyboard, via :focus-visible) */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); } ::selection { background: var(--ag2); color: #fff; } /* Dünne Command-Center-Scrollbars */ :where(html) { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } :where(*)::-webkit-scrollbar { width: 5px; height: 5px; } :where(*)::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); } :where(*)::-webkit-scrollbar-thumb:hover { background: var(--line-3); } /* ── Premium-Utilities (opt-in, eigene Namen → keine Kollision) ──── */ /* Reveal: gestaffeltes Einblenden beim Laden. Stagger via inline --i. */ .lx-reveal { opacity: 0; transform: translateY(10px); animation: lx-reveal var(--d-4) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes lx-reveal { to { opacity: 1; transform: none; } } /* Lift: dezenter Hover-Auftrieb für Karten/Kacheln */ .lx-lift { transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out); } .lx-lift:hover { transform: translateY(-2px); box-shadow: var(--e-4); border-color: var(--line-2); } /* Eyebrow / Kicker — mono, gesperrt, dokumentarisch */ .lx-eyebrow { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--t3); } .lx-kicker { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .lx-reveal { opacity: 1; transform: none; } }