/* ============================================================ Design tokens — getcasso.com Wszystkie zmienne CSS w jednym miejscu. Tryb jasny i ciemny. ============================================================ */ :root { /* Tryb jasny (default) */ --bg: #fcfaf6; --bg-2: #ffffff; --bg-3: #f5f1ea; --text: #0d1421; --text-2: #4a5260; --text-3: #6b6258; --border: rgba(20, 30, 40, 0.1); --border-2: rgba(20, 30, 40, 0.18); --rule: #1a2332; /* Akcenty semantyczne */ --accent: #1a4d3e; /* Butelkowa zieleń — pozytywne, bezpieczne */ --accent-soft: #e8f0eb; --warm: #c97a3a; /* Ostrzegawcze, terminy, VAT */ --warm-soft: #fbeede; --rose: #b14444; /* Negatywne / błędy */ /* Telefon w mockupie */ --phone-bezel: #1a2332; --phone-screen: #fcfaf6; /* Spacing */ --space-xs: 6px; --space-sm: 12px; --space-md: 18px; --space-lg: 28px; --space-xl: 44px; --space-2xl: 72px; /* Radius — celowo MAŁE bo to "poważny finansowy" styl */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; /* Typografia */ --font-serif: 'Source Serif 4', 'Times New Roman', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* Layout */ --container-max: 1100px; --container-narrow: 760px; --section-padding: 72px 44px; /* Animation */ --transition-base: 0.2s ease; } /* Tryb ciemny — zastosowany przez data-theme="dark" na lub */ [data-theme="dark"] { --bg: #0e1218; --bg-2: #161a22; --bg-3: #1c212b; --text: #f0ece4; --text-2: #b0a99c; --text-3: #847d72; --border: rgba(255, 240, 215, 0.1); --border-2: rgba(255, 240, 215, 0.18); --rule: #f0ece4; --accent: #6fb89e; --accent-soft: rgba(111, 184, 158, 0.1); --warm: #e8a86e; --warm-soft: rgba(232, 168, 110, 0.1); --rose: #d97777; --phone-bezel: #2a313d; --phone-screen: #161a22; } /* Responsive: mniejsze paddingi na mobile */ @media (max-width: 768px) { :root { --section-padding: 52px 22px; --space-xl: 28px; --space-2xl: 48px; } }