/* ============================================================ Swiss Whale Intelligence — Design Tokens v1 ============================================================ Single Source of Truth für alle 5 Page-Templates: • / (Hauptseite) • /dashboard (Live Dashboard) • /charts (BTC Indicator Charts) • /help (Help & FAQ) • /alerts/, /whale/, /tx/ (PHP signed pages) • /ledger (Open Ledger) Deploy: • Master: /mnt/volume/andreas/design-system/tokens.css • Public 1: /var/www/btcwhalealerts.com/www/_shared/tokens.css • Public 2: /home/andreas/whale-dashboard/frontend/_shared/tokens.css Versionierung: bei Breaking Changes Major-Version hochsetzen und tokens-v2.css separat deployen — nie alte Tokens umbenennen während Pages noch nicht migriert sind. Last Update: 2026-05-01 (added Asset-Brand-Tokens for Multi-Asset-Pivot) Migration-Status: Phase 1 (Hauptseite) in Arbeit, Phase 0 Multi-Asset-Pivot ready ============================================================ */ :root { /* ---------------------------------------------------------- COLORS — Backgrounds ---------------------------------------------------------- */ --bg-primary: #FFFFFF; /* Page background, cards in dark sections */ --bg-secondary: #F7F6F3; /* Section "alt", cards, ledger-section */ --bg-tertiary: #F0EEE9; /* Subtle accent backgrounds */ --bg-overlay: rgba(255,255,255,0.95); /* Cookie banner, modals */ /* Risk + Status backgrounds */ --bg-risk: #FEF2F2; /* Risk warnings */ --bg-success-soft: rgba(46,204,113,0.10); --bg-warning-soft: rgba(243,152,0,0.08); /* ---------------------------------------------------------- COLORS — Text ---------------------------------------------------------- */ --text-primary: #1C1C1E; /* Body, headings */ --text-secondary: #6B6560; /* Subtitles, meta info — WCAG AA 5.6:1 */ --text-muted: #6E685F; /* Captions, hints — etwas dunkler für Lesbarkeit */ --text-on-accent: #FFFFFF; /* Text auf accent-bg */ --text-risk: #991B1B; /* Warnings */ /* ---------------------------------------------------------- COLORS — Accent (max 4 — vorher waren es 6+) ---------------------------------------------------------- */ --accent-primary: #042C53; /* Swiss Navy — primary brand */ --accent-primary-hover: #1a5276; /* Hover state */ --accent-warning: #f39800; /* Orange — featured pricing, CTA hover */ --accent-success: #2ecc71; /* Performance badge, checkmarks */ --accent-gold: #a55d00; /* Verify-Link, Cookie-Accept — WCAG AA 5.04:1 auf white */ --accent-gold-hover:#7a4500; /* Gold hover state */ --accent-risk: #DC0A1A; /* Swiss Flag red, alerts */ /* ---------------------------------------------------------- COLORS — Asset Brand (added 2026-05-01 for Multi-Asset-Pivot) Used in Spotlight-Page Hero, badges, alerts, cross-asset-rotation visualizations. Each asset gets its canonical brand color from official brand guidelines (BTC: bitcoin.org, ETH: ethereum.org, etc.) Solana uses gradient — define both stops + composed value. ---------------------------------------------------------- */ --asset-btc: #F7931A; /* Bitcoin orange (official) */ --asset-btc-soft: rgba(247,147,26,0.08); --asset-eth: #627EEA; /* Ethereum blue-purple (official) */ --asset-eth-soft: rgba(98,126,234,0.08); --asset-sol-1: #14F195; /* Solana gradient stop 1 (teal-green) */ --asset-sol-2: #9945FF; /* Solana gradient stop 2 (purple) */ --asset-sol: linear-gradient(135deg, var(--asset-sol-1) 0%, var(--asset-sol-2) 100%); --asset-sol-fallback:#9945FF; /* Fallback for browsers without gradient support */ --asset-sol-soft: rgba(153,69,255,0.08); --asset-usdt: #26A17B; /* Tether green (official) */ --asset-usdt-soft: rgba(38,161,123,0.08); --asset-gold: #D4AF37; /* Tokenized gold (XAUT+PAXG combined surface) */ --asset-gold-soft: rgba(212,175,55,0.10); /* Asset Logo Sizing — consistent across all surfaces */ --asset-logo-size-hero: 64px; /* Spotlight-Page Hero-Band */ --asset-logo-size-card: 32px; /* Stats-cards, Recipe-cards */ --asset-logo-size-row: 20px; /* Live-feed rows, table cells */ --asset-logo-size-mark: 16px; /* Brand-corner-marks on auto-images */ /* ---------------------------------------------------------- COLORS — Borders + Dividers ---------------------------------------------------------- */ --border-subtle: rgba(0,0,0,0.06); /* Section dividers — sehr dezent */ --border-card: rgba(0,0,0,0.09); /* Cards default — Linear-Style */ --border-card-hover:rgba(0,0,0,0.18); /* Cards hover — darker border, kein lift */ --border-medium: rgba(0,0,0,0.15); /* Inputs, lang-switch */ --border-strong: #042C53; /* Active states */ /* ---------------------------------------------------------- SHADOWS — modern, subtle (modernized 2026-04-26) Vorher: 0 10px 30px rgba(0,0,0,0.1) — Material-2018-Stil Jetzt: layered, subtler — Linear/Vercel-Stil ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 4px 12px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.08); --shadow-xl: 0 8px 24px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.12); /* Hover-Lift: dezenter als vorher (nur 2px statt 5px) */ --shadow-hover: 0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.10); /* Cookie-Banner-Bottom-Shadow (umgekehrte Richtung) */ --shadow-banner-top:-4px 0 16px rgba(0,0,0,0.06); /* ---------------------------------------------------------- TYPOGRAPHY — fluid modular scale (Major Third 1.25×, mit clamp für responsive) System: jede Stufe wächst 1.25× zur vorherigen, fluid-clamped für Mobile→Desktop ---------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; /* Mono: IBM Plex Mono ist self-hosted (alle Pages), fallback auf system mono. 'Cascadia Mono' (Windows-only) entfernt 27.04.2026 — Firefox blockt es als Fingerprinting-Vector wenn privacy.resistFingerprinting aktiv. */ --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* Display sizes — fluid clamp für moderne Responsive */ --text-xs: 0.75rem; /* 12px — captions, meta */ --text-sm: 0.875rem; /* 14px — meta, button text */ --text-base: 1rem; /* 16px — body */ --text-lg: clamp(1.0625rem, 0.95vw + 0.875rem, 1.25rem); /* 17→20px — lead */ --text-xl: clamp(1.1875rem, 1.5vw + 0.95rem, 1.5rem); /* 19→24px — h4 */ --text-2xl: clamp(1.5rem, 2.5vw + 1rem, 2rem); /* 24→32px — h3 */ --text-3xl: clamp(1.875rem, 3vw + 1.25rem, 2.5rem); /* 30→40px — h2 */ --text-4xl: clamp(2.25rem, 4.5vw + 1rem, 3.5rem); /* 36→56px — h1 */ --text-5xl: clamp(2.75rem, 6vw + 1rem, 4.5rem); /* 44→72px — hero display */ /* Letter-spacing tokens — moderne tighter spacing für Display-Headings */ --tracking-tight: -0.02em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.01em; --tracking-wider: 0.05em; /* eyebrow, all-caps labels */ /* Weights */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ---------------------------------------------------------- SPACING — 4px base scale ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 6rem; /* 96px */ --space-16: 8rem; /* 128px */ /* ---------------------------------------------------------- RADIUS ---------------------------------------------------------- */ --radius-sm: 4px; /* small badges, language switch */ --radius-md: 6px; /* inputs, small buttons */ --radius-lg: 8px; /* buttons, cards */ --radius-xl: 12px; /* persona cards, larger components */ --radius-2xl: 16px; /* main cards, pricing cards */ --radius-full: 9999px; /* pill badges */ /* ---------------------------------------------------------- ANIMATIONS — kurze, professionelle Easings Vorher: 1s ease-out für Hero-FadeIn — zu lang nach modernen Standards Jetzt: 200-400ms mit Bezier-Easing (Linear/Vercel-Stil) ---------------------------------------------------------- */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Decelerate */ --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); /* Smoother */ /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container-max: 1200px; /* Standard content width */ --container-wide: 1400px; /* Dashboard mit vielen Charts */ --header-height: 72px; /* Sticky header */ --z-header: 100; --z-modal: 1000; --z-banner: 2000; /* Cookie banner */ --z-skiplink: 9999; /* ---------------------------------------------------------- BACKWARD-COMPAT ALIASES (Dashboard, Charts, Help) Diese Pages nutzten frühere Namen — Aliases halten sie funktional bis sie in Phase 2 vollständig migriert sind. ---------------------------------------------------------- */ --border: var(--border-card); /* Dashboard: --border = card-style */ --accent: var(--accent-primary); /* Dashboard: --accent (no suffix) */ --text: var(--text-primary); /* Charts: --text */ --text2: var(--text-secondary); /* Charts: --text2 */ --card: var(--bg-secondary); /* Charts: --card = surface */ --bg: var(--bg-primary); /* Charts: --bg */ --green: var(--accent-success); /* Help: --green */ --mono: var(--font-mono); /* Dashboard, Charts, Help: --mono */ /* ---------------------------------------------------------- STATUS COLORS — für Bullish/Bearish/Neutral/Info/Warning Hauptsächlich vom Dashboard verwendet (Custom-Tickers, Whale-Flow-Indicators, Status-Tags). WCAG-AA pairings dokumentiert je Token. ---------------------------------------------------------- */ /* Bullish (positive flow, gains) */ --status-bullish: #22c55e; /* Tailwind green-500 — Backgrounds + Icons */ --status-bullish-strong: #0a7a3d; /* darker green — WCAG-AA 5.14:1 für Text auf weiß */ --status-bullish-soft: rgba(34, 197, 94, 0.10); /* Soft BG */ --status-bullish-bg: #dcfce7; /* Tailwind green-100 — light BG für Badges */ /* Bearish (negative flow, losses) */ --status-bearish: #ef4444; /* Tailwind red-500 — Backgrounds + Icons */ --status-bearish-strong: #b91c1c; /* Tailwind red-700 — WCAG-AA für Text auf weiß */ --status-bearish-soft: rgba(239, 68, 68, 0.10); --status-bearish-bg: #fee2e2; /* Tailwind red-100 — light BG für Badges */ /* Warning (caution, near-threshold) */ --status-warning: #f97316; /* Tailwind orange-500 */ --status-warning-strong: #c2410c; /* Tailwind orange-700 — WCAG-AA für Text */ --status-warning-soft: rgba(249, 115, 22, 0.10); /* Info (neutral notifications, links) */ --status-info: #6366f1; /* Tailwind indigo-500 */ --status-info-strong: #4f46e5; /* Tailwind indigo-600 */ --status-info-soft: rgba(99, 102, 241, 0.10); /* Neutral (inactive, hints, separators) */ --status-neutral: #6b7280; /* Tailwind gray-500 */ --status-neutral-strong: #475569; /* Tailwind slate-600 — WCAG-AA */ --status-neutral-soft: rgba(107, 114, 128, 0.10); /* Yellow (highlight, light warning) */ --status-highlight: #eab308; /* Tailwind yellow-500 */ --status-highlight-strong: #a16207; /* Tailwind yellow-700 — WCAG-AA */ /* Cyan (special accent, e.g., dormant whales) */ --status-cyan: #06b6d4; /* Tailwind cyan-500 */ /* Purple (special, e.g., trump-correlation) */ --status-purple: #8b5cf6; /* Tailwind violet-500 */ } /* ============================================================ DARK MODE — auto-applied via prefers-color-scheme: dark ============================================================ Aktiviert wenn: 1. User-OS auf Dark-Mode (default behavior) 2. explizit gesetzt (User-Override via Toggle) Strategie: nur Backgrounds/Text/Borders flippen, Accent-Farben bleiben gleich (Brand-Konsistenz). Status-Colors (bullish/bearish) werden leicht heller weil Kontrast auf Dark-BG bei sat. Tailwind-500 Tönen schlecht ist. Disable-Override: erzwingt Light-Mode. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Backgrounds — invertiert + sehr leicht warmgetönt für Lesbarkeit */ --bg-primary: #0F1115; /* Tiefes Charcoal mit minimalem Blau-Stich */ --bg-secondary: #16181D; /* Card-BGs */ --bg-tertiary: #1C1F25; /* Hervorgehobene Areas */ --bg-overlay: rgba(15,17,21,0.92); /* Text — invertiert mit angepassten Kontrast-Stufen */ --text-primary: #F0EBE3; /* Warm-white für Lesbarkeit (nicht reines #fff) */ --text-secondary: #A8A29E; /* WCAG-AA 5.04:1 auf #0F1115 */ --text-muted: #8A847C; /* WCAG-AA 4.5:1 — Grenzwert für large text */ /* Borders — heller weil dunkel-zu-hell mehr Kontrast braucht */ --border-subtle: rgba(255,255,255,0.06); --border-card: rgba(255,255,255,0.10); --border-card-hover: rgba(255,255,255,0.20); --border-medium: rgba(255,255,255,0.18); /* Risk + Status backgrounds (etwas heller für Sichtbarkeit) */ --bg-risk: rgba(220,38,38,0.12); --bg-success-soft: rgba(34,197,94,0.15); --bg-warning-soft: rgba(243,152,0,0.13); /* Accent — minimal heller für Lesbarkeit auf dunklem BG */ --accent-primary: #4A87C7; /* Helleres Swiss Navy für Dark-BG */ --accent-primary-hover: #6B9FD3; /* Status — Tailwind-400 statt -500 für besseren Kontrast auf dunkel */ --status-bullish: #4ade80; /* Tailwind green-400 */ --status-bullish-strong: #86efac; /* light green für Text */ --status-bullish-bg: rgba(74,222,128,0.10); --status-bearish: #f87171; /* Tailwind red-400 */ --status-bearish-strong: #fca5a5; --status-bearish-bg: rgba(248,113,113,0.10); --status-warning: #fb923c; --status-warning-strong: #fdba74; --status-info: #818cf8; --status-info-strong: #a5b4fc; --status-neutral: #94a3b8; --status-neutral-strong: #cbd5e1; --status-highlight: #fbbf24; --status-highlight-strong: #fde047; --status-cyan: #22d3ee; --status-purple: #a78bfa; /* Shadows — tiefer/dunkler, niedrigere Opacity für subtilen Effekt */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 1px 3px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 4px 12px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5); --shadow-xl: 0 8px 24px rgba(0,0,0,0.45), 0 24px 48px rgba(0,0,0,0.55); --shadow-hover: 0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45); } } /* Manueller Dark-Mode Override (User-Toggle, höhere specificity) */ :root[data-theme="dark"] { --bg-primary: #0F1115; --bg-secondary: #16181D; --bg-tertiary: #1C1F25; --bg-overlay: rgba(15,17,21,0.92); --text-primary: #F0EBE3; --text-secondary: #A8A29E; --text-muted: #8A847C; --border-subtle: rgba(255,255,255,0.06); --border-card: rgba(255,255,255,0.10); --border-card-hover: rgba(255,255,255,0.20); --border-medium: rgba(255,255,255,0.18); --bg-risk: rgba(220,38,38,0.12); --bg-success-soft: rgba(34,197,94,0.15); --bg-warning-soft: rgba(243,152,0,0.13); --accent-primary: #4A87C7; --accent-primary-hover: #6B9FD3; --status-bullish: #4ade80; --status-bullish-strong: #86efac; --status-bullish-bg: rgba(74,222,128,0.10); --status-bearish: #f87171; --status-bearish-strong: #fca5a5; --status-bearish-bg: rgba(248,113,113,0.10); --status-warning: #fb923c; --status-info: #818cf8; --status-neutral: #94a3b8; --status-highlight: #fbbf24; --status-cyan: #22d3ee; --status-purple: #a78bfa; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 1px 3px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 4px 12px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5); --shadow-xl: 0 8px 24px rgba(0,0,0,0.45), 0 24px 48px rgba(0,0,0,0.55); --shadow-hover: 0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45); } /* Light-Mode Force-Override (User opt-out wenn OS dark) */ :root[data-theme="light"] { /* Werte aus :root oben — explizit nochmal damit specificity gewinnt */ --bg-primary: #FFFFFF; --bg-secondary: #F7F6F3; --text-primary: #1C1C1E; --text-secondary: #6B6560; } /* Glassmorphism-Header dynamic background — bei Dark-Mode angepasst */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --header-glass-bg: rgba(15,17,21,0.85); } } :root[data-theme="dark"] { --header-glass-bg: rgba(15,17,21,0.85); } :root, :root[data-theme="light"] { --header-glass-bg: rgba(255,255,255,0.85); } /* ============================================================ GLOBAL — Reset + Defaults (in jedem Page-Template via @import) ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Skip link — A11y standard */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--accent-primary); color: var(--text-on-accent); padding: var(--space-2) var(--space-4); z-index: var(--z-skiplink); text-decoration: none; font-weight: var(--font-semibold); border-radius: 0 0 var(--radius-md) 0; transition: top var(--duration-fast) var(--ease-default); } .skip-link:focus { top: 0; } /* Reduced-motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Focus-visible ring — A11y, konsistent für Keyboard-Nav */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* Selection */ ::selection { background: var(--accent-primary); color: var(--text-on-accent); }