/* ============================================ MOJA PRZYGODA — Design Tokens (SINGLE SOURCE OF TRUTH) Zmiana tu = zmiana na całej stronie. TRYB: SAFE MODE (Etap 1 — neutralny wizualnie dla produkcji) Legacy tokeny --color-* zachowują swoje DOTYCHCZASOWE wartości, więc WooCommerce / checkout / koszyk wyglądają 1:1 jak wcześniej. Nowe mapowanie legacy→mp jest opt-in przez klasę .mp-v2-theme (sekcja na dole) — działa tylko tam, gdzie ją świadomie założysz. ============================================ */ /* Google Fonts — ładujemy w każdej strony: */ :root { /* ── Kolory główne ── */ --green: #3d6b4f; --green-light: #4d8a63; --green-pale: #e8f0ea; --green-bg: #f0f5f1; --cream: #fdf9f3; --cream-dark: #f5edd9; --gold: #c9a84c; --gold-light: #e8d8a0; --gold-pale: rgba(201, 168, 76, 0.1); /* ── Kolory tekstu ── */ --dark: #1e2a22; --text: #2c3e33; --text-mid: #5a6e60; --text-light: #8a9a8e; /* ── Kolory tła ciemne (CTA, footer) ── */ --dark-bg: #1e2a22; --dark-footer: #1a241d; /* ── Obramowania ── */ --border: rgba(61, 107, 79, 0.08); --border-mid: rgba(61, 107, 79, 0.18); /* ── Białe ── */ --white: #ffffff; /* ── Typografia ── */ --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; /* ── Rozmiary tekstu ── */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.625rem; /* 26px — mobile heading */ --text-3xl: 2rem; /* 32px — desktop heading */ --text-4xl: 2.5rem; /* 40px */ --text-5xl: 3.25rem; /* 52px — hero desktop */ /* ── Zaokrąglenia ── */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-full: 9999px; /* ── Cienie ── */ --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.03); --shadow-md: 0 8px 32px rgba(30, 42, 34, 0.06); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08); --shadow-btn: 0 4px 20px rgba(61, 107, 79, 0.25); --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.3); /* ── Spacing ── */ --section-x: 24px; /* mobile padding */ --section-y: 48px; /* mobile padding */ --max-width: 1100px; /* ── Animacje ── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration: 0.3s; /* ============================================ ── LEGACY TOKENY (warstwa zgodności — SAFE MODE) ── Stary "main stylesheet", "woocommerce stylesheet" i "mailpoet" używają tych nazw. W Etapie 1 ZACHOWUJEMY ich oryginalne wartości, żeby nic nie zmieniło się wizualnie na produkcji (zwłaszcza WooCommerce / checkout / koszyk / Moje konto). DOCELOWO (osobny etap) można je zmapować na nowe tokeny marki: --color-primary: var(--green); (#1E4D2B → #3d6b4f) --color-secondary: var(--gold); (#C9A66B → #c9a84c) --color-background: var(--cream); (#FAF8F3 → #fdf9f3) ⚠️ ALE dopiero PO osobnym teście wizualnym WooCommerce (kontrast przycisków, linki, tabele checkoutu). Do tego czasu testuj nowe kolory wyłącznie przez .mp-v2-theme (poniżej). ============================================ */ --color-primary: #1E4D2B; --color-secondary: #C9A66B; --color-background: #FAF8F3; } /* ============================================ ── OPT-IN: motyw v2 do testów (.mp-v2-theme) ── Nadpisuje legacy tokeny NOWYMI kolorami marki, ale TYLKO w obrębie elementu z tą klasą (i jego potomków). Globalny WooCommerce zostaje nietknięty. Użycie: dodaj class="mp-v2-theme" na strony roboczej v2 (np. /v2-ksiazeczka-chrzescijanska/) albo na wrapperze sekcji, którą chcesz podejrzeć w nowych kolorach. Zdejmujesz klasę → wracają stare wartości. Zero wpływu na produkcyjny checkout/koszyk. ============================================ */ .mp-v2-theme { --color-primary: var(--green); --color-secondary: var(--gold); --color-background: var(--cream); } /* ── Desktop overrides ── */ @media (min-width: 768px) { :root { --section-x: 48px; --section-y: 80px; } }