/* ========================================================================== FWN Base 2 — Design-Tokens (v2) Referenz-Layout: Finexy-Dashboard (helle Insel-Optik), Akzent = FWN-Grün. THEMING: — Light ist Default (:root). ========================================================================== */ :root { color-scheme: light; /* Flächen: grauer Seitenhintergrund, weiße „Inseln" (Bubbles/Cards) */ --bg: #ebedee; /* Seitenhintergrund (helles Grau) */ --isle: #ffffff; /* Inseln: Topbar-Bubbles, Rail, Cards */ --card: #ffffff; /* Karten im Bento */ --card-2: #f4f5f6; /* eingelassene Fläche / Hover / Input */ --sk: #e7e9ea; /* Skeleton-Grundton (Wireframe) */ /* Text (Apple-Graustufen) */ --fg: #1d1d1f; --fg-2: #6e6e73; --fg-3: #9b9ba0; /* Hairlines */ --line: rgba(0, 0, 0, .07); --line-2: rgba(0, 0, 0, .13); /* Brand-Grün (Markenkonstante — in beiden Modi identisch) */ --green-200: #9ccf92; --green-300: #6ab775; --green-400: #4fb373; --green-500: #21874a; --green-600: #1c6f3e; --green-700: #14522d; --grad-brand: linear-gradient(110deg, #6ab775 0%, #4fb373 25%, #21874a 60%, #9ccf92 100%); --grad-hero: linear-gradient(135deg, #56b97c 0%, #21874a 78%); /* Dunkle Kontrastfläche (Referenz: schwarze Karte/aktiver Tab) → Tiefgrün */ --ink: #123b23; --ink-fg: #eaf6ee; /* Typo — bewusst kompakt (kleine Schriften auf Desktop) */ --font: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --fs: 13.5px; /* Basis */ --fs-sm: 12px; --fs-xs: 11px; /* Radien: großzügige Insel-Rundungen wie in der Referenz */ --r-isle: 22px; --r-card: 16px; --r-ctl: 12px; --r-pill: 980px; /* Schatten (sehr zurückhaltend, Apple-ruhig) */ --shadow-isle: 0 1px 2px rgba(16, 24, 20, .04); --shadow-pop: 0 18px 50px -20px rgba(16, 24, 20, .25); /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Mobile Viewport-Höhe (eingefroren, gegen iOS-Scroll-Sprünge) */ --vph: 100svh; } [data-theme="dark"] { color-scheme: dark; --bg: #0a0a0b; --isle: #141416; --card: #17181a; --card-2: #1f2124; --sk: #242629; --fg: #f5f5f7; --fg-2: #a1a1a6; --fg-3: #6e6e73; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15); --ink: #0f3d22; --ink-fg: #eaf6ee; --shadow-isle: 0 1px 2px rgba(0, 0, 0, .35); --shadow-pop: 0 18px 50px -18px rgba(0, 0, 0, .65); } /* ========================================================================== Basis ========================================================================== */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs); line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; color: var(--fg); } p { margin: 0; color: var(--fg-2); } button { font-family: var(--font); } /* Signatur-Verlauf auf Akzentwörtern */ .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Icons (Inline-SVG, Stroke) */ .ic { width: 17px; height: 17px; flex: none; }