/* Farbenkranz — Color tokens * A soft, PASTEL natural palette: warm cream paper, fir-green ink, gentle sage, * a fresh peach/coral accent pair and a soft cream-yellow. * v3, tuned per client feedback: * - the clay/brown terracotta is RETIRED (read as muddy). No brown on buttons * or larger surfaces; the warm accent is now the peach/coral family. * - dusty rose is RETIRED (read as too feminine). Peach #ff9780 takes its roles. * - the buy/funnel CTA defaults to a soft fir fill and DEEPENS to full fir on * hover/press — still the darkest element on an otherwise pastel page, so * conversion buttons always pop (~8–9:1 contrast). Secondary actions are * pastel sage fills. */ :root { /* ---- Base palette (raw brand colors) ---- */ --fk-cream: #f6f2e9; /* warm cream — page background */ --fk-fir: #2e4341; /* dark fir green — text, headings & the BUY fill */ --fk-sage: #97ab8d; /* soft pastel sage — secondary accents, secondary-button border */ --fk-peach: #ff9780; /* fresh peach — sale badge, stars, small warm signals. NEVER large fills, NEVER white text on it (2.1:1) — pair with fir (5:1). */ --fk-coral: #a94e33; /* deep coral — links, H3, eyebrows, sale prices, errors. The text-safe warm accent: AA on cream (4.8:1) & white (5.5:1). */ --fk-cream-yellow: #f6e7b4; /* soft cream-yellow — hover accent, Hinweis box */ --fk-white: #ffffff; /* white — nav / card surfaces */ /* ---- Primary action / "buy" color ---- * Funnel buttons (Kaufen / Warenkorb / Kasse) default to a SOFT FIR fill — * still clearly the darkest, most saturated element on an all-pastel page — * and DEEPEN to full fir on hover/press for tactile feedback. Cream text * ≈8–9:1 (AA+) on both. No brown fills anywhere anymore. */ --fk-buy: var(--fk-fir-soft); /* fir-soft — primary/buy fill (default) */ --fk-buy-deep: var(--fk-fir); /* fir — hover/press, deepens */ --fk-buy-glow: rgba(46, 67, 65, 0.24); /* soft lift shadow under buy CTA */ --fk-buy-sage: #5f7c67; /* deep sage — mid-weight alternative fill */ /* ---- Tints & shades (derived, for hovers/borders/washes) ---- */ --fk-cream-deep: #efe8d8; /* slightly deeper cream — alt sections, hairlines */ --fk-cream-soft: #faf7f0; /* near-white cream — card surfaces on cream */ --fk-fir-soft: #3c5450; /* lifted fir — hover on dark */ --fk-fir-deep: #233331; /* deepened fir — pressed dark */ --fk-green-mid: #5f7c67; /* softer, lighter green — footer & deep-sage surfaces */ --fk-green-soft: #7c977f; /* mid sage-green — hover surfaces */ --fk-coral-deep: #8a3c22; /* pressed/hover coral */ --fk-coral-soft: #f2d8ca; /* soft peach wash — input borders, rings, tints */ --fk-peach-band: #ffe0d4; /* pastel peach — top announcement band */ --fk-peach-soft: #fbe6dc; /* pastel peach wash */ --fk-sage-soft: #d4ddcb; /* pastel sage wash — secondary button fill */ /* ---- Deprecated v2 aliases (keep existing consumers working) ---- */ --fk-terracotta: var(--fk-coral); --fk-terracotta-deep: var(--fk-coral-deep); --fk-terracotta-soft: var(--fk-coral-soft); --fk-rose: var(--fk-peach); --fk-rose-band: var(--fk-peach-band); --fk-rose-soft: var(--fk-peach-soft); /* ---- Semantic surface aliases ---- */ --surface-page: var(--fk-cream); /* default page background */ --surface-alt: var(--fk-cream-deep);/* alternating section background */ --surface-card: var(--fk-white); /* product & content cards */ --surface-card-warm: var(--fk-cream-soft); --surface-dark: var(--fk-fir); /* dark sections (use sparingly) */ --surface-footer: var(--fk-green-mid); /* softer green footer */ --surface-band: var(--fk-peach-band);/* pastel peach info band */ --surface-glass: rgba(249, 245, 238, 0.82); /* container-glas fill */ /* ---- Semantic text aliases ---- */ --text-heading: var(--fk-fir); /* H1/H2/H4 ink */ --text-body: #44514f; /* body copy — fir, softened */ --text-muted: #7b8583; /* meta, captions, legal */ --text-link: var(--fk-coral); /* inline links, H3 (AA on cream) */ --text-on-dark: var(--fk-cream); /* text over fir/green surfaces */ --text-on-band: var(--fk-coral-deep);/* deep coral — text on the peach band (6:1) */ --text-on-accent: var(--fk-cream); /* text over the buy fill (fir) */ /* ---- Borders & lines ---- */ --border-hairline: rgba(46, 67, 65, 0.14); /* faint fir hairline */ --border-soft: var(--fk-coral-soft); --border-strong: var(--fk-fir); /* ---- Functional ---- */ --accent-primary: var(--fk-buy); /* primary / buy button fill (fir) */ --accent-dark: var(--fk-fir); /* dark solid button fill */ --accent-secondary: var(--fk-sage); /* secondary surface */ --accent-hover: var(--fk-cream-yellow);/* hover wash accent */ --sale-badge: var(--fk-peach); /* "Angebot!" badge — ALWAYS with fir text (5:1) */ --in-stock: var(--fk-green-mid); /* stock status text ("Auf Lager") */ /* ---- Soft gradients (refined, warm, low-stop) ---- * Sanfte Verläufe, pastel. Subtle and monochromatic-warm; * never harsh, never purple, never muddy-brown. */ --grad-cream: linear-gradient(180deg, #faf7f0 0%, #f6f2e9 100%); /* @kind color */ --grad-hero: radial-gradient(70% 90% at 80% 16%, rgba(255,151,128,0.13) 0%, transparent 55%), radial-gradient(80% 90% at 12% 92%, rgba(151,171,141,0.18) 0%, transparent 55%), linear-gradient(165deg, #faf6ef 0%, #f0e9db 100%); /* @kind color */ --grad-blush: radial-gradient(90% 120% at 20% 15%, rgba(255,151,128,0.15) 0%, transparent 60%), linear-gradient(180deg, #fbf8f2 0%, #f5eee3 100%); /* @kind color */ --grad-sage: radial-gradient(90% 120% at 85% 20%, rgba(151,171,141,0.20) 0%, transparent 60%), linear-gradient(180deg, #f6f2e9 0%, #eef1e7 100%); /* @kind color */ --grad-image-a: linear-gradient(150deg, #f2ead9 0%, #ecdcc6 55%, #e2cfae 100%); /* @kind color */ --grad-image-b: linear-gradient(150deg, #e5e9dd 0%, #cbd7c2 60%, #b6c6ac 100%); /* @kind color */ --grad-image-c: linear-gradient(150deg, #fdeee7 0%, #fcd9c9 60%, #f7bda6 100%); /* @kind color */ --grad-image-d: linear-gradient(150deg, #f2ecdf 0%, #e9dcc6 55%, #e0d0b0 100%); /* @kind color */ }