/** * Weingut Ritter — Design-Tokens (Classic-Theme ritter-shop, Shop-Instanz) * Ablage: wp-content/themes/ritter-shop/assets/css/tokens.css * * Kopierte, versionierte Fassung der gemeinsamen Basis aus * wp-content/themes/ritter-brand/assets/css/tokens.css (Issue #236, siehe * docs/issue-191-shared-design-packaging-decision.md: kopierte Schicht je * Instanz, kein Parent-Theme, kein Shared-Build-Paket, kein automatischer * Sync). Aenderungen an einer Kopie muessen manuell in die andere * uebertragen werden — Drift-Check folgt in einem separaten Issue. * * Bewusst NOCH NICHT ergaenzt (folgt erst mit der eigentlichen * WooCommerce-Integration, nicht Teil dieses Scaffold-Issues): Wein- * Kategorie-Dot-Farben (--wr-color-cat-*) und die Produktbild-„Buehne" * (--wr-bottle-stage) aus ritter-poc/assets/css/tokens.css. * * Werte = Briefing v0.2 (Ritter-Blau #0030A0), identisch zur Brand-Fassung. */ :root { /* --- Marke --- */ --wr-color-primary: #0030A0; /* Ritter-Blau, Pantone 293 U */ --wr-color-primary-hover: #032982; --wr-color-primary-active: #0A2666; --wr-color-navy: #081430; /* Chrome / Promo / Footer */ --wr-color-navy-900: #0B1D47; --wr-color-accent: #88A5E7; /* Steel-Akzent für dunkle Flächen */ --wr-color-success: #627D47; /* Erfolg */ --wr-color-success-fg: #4C6139; /* Oliv-Text auf hell (AA) */ --wr-color-sale: #B20000; /* Alert */ /* Text / Flächen */ --wr-color-text: #1A1A1A; --wr-color-text-body: #676767; --wr-color-text-muted: #6F6F6F; /* AA-fest auf Weiß (5.0:1) */ --wr-color-border: #E7EAEE; --wr-color-band: #F4F6F8; /* gesenkte Fläche / Chips */ --wr-color-base: #FFFFFF; /* --- Typografie --- */ --wr-font-display: 'Old Standard TT', Georgia, 'Times New Roman', serif; --wr-font-sans: 'Quattrocento Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --wr-text-xs: 0.75rem; --wr-text-sm: 0.875rem; --wr-text-base: 1rem; --wr-text-lg: 1.125rem; --wr-text-xl: 1.25rem; --wr-text-title: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); --wr-text-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem); --wr-text-hero: clamp(2.75rem, 1.6rem + 5vw, 5rem); --wr-tracking-eyebrow: 0.22em; --wr-leading-relaxed: 1.7; /* --- Spacing (4px-Skala) --- */ --wr-space-1: 0.25rem; --wr-space-2: 0.5rem; --wr-space-3: 0.75rem; --wr-space-4: 1rem; --wr-space-5: 1.25rem; --wr-space-6: 1.5rem; --wr-space-8: 2rem; --wr-space-10: 2.5rem; --wr-space-12: 3rem; --wr-container-max: 1240px; /* --- Radien / Effekte --- */ --wr-radius-md: 10px; --wr-radius-card: 16px; --wr-radius-pill: 999px; --wr-shadow-sm: 0 1px 3px rgba(16,49,74,.10), 0 1px 2px rgba(16,49,74,.06); --wr-shadow-md: 0 8px 24px rgba(16,49,74,.12), 0 2px 6px rgba(16,49,74,.08); --wr-focus-ring: 0 0 0 3px rgba(0,48,160,.45); } /* ============================================================ A11y-Basis ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--wr-color-primary); outline-offset: 2px; box-shadow: var(--wr-focus-ring); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================ OPTIONAL — Welt „Navy" (spätere A/B-Phase, nicht Launch-Default) Aktivierung über . Identisch zur Brand-Fassung. ============================================================ */ body.theme-navy { --wr-color-primary: #88A5E7; --wr-color-primary-hover: #A9BEEE; --wr-color-text: #FFFFFF; --wr-color-text-body: rgba(255,255,255,.75); --wr-color-text-muted: rgba(255,255,255,.55); --wr-color-border: rgba(255,255,255,.12); --wr-color-band: #0B1D47; } body.theme-navy { background: var(--wr-color-navy); }