/* ============================================================ DESIGN-TOKENS.CSS — Tokooke Centralized Design Tokens This file MUST be loaded first in the section. All global variables are defined here to prevent conflicts. ============================================================ */ :root { /* ─── Base Surfaces ─── */ --white: #ffffff; --black: #000000; --light: #EDF2F7; --dark: #1E2B3A; --gray: #5a6a7e; /* WCAG AA: 5.14:1 on white (was #718096 = 4.02) */ /* ─── Shared UI Variables ─── */ --secondary: #6C9EBF; --secondary-dark: #588bab; --secondary-hover: #7baecf; --header-bg: #FFFFFF; --header-text: #2D3E50; --footer-bg: #1E2B3A; --footer-text: #FFFFFF; --shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05); --border-radius: 12px; --container-width: 1280px; --success: #22c55e; --success-text: #047857; /* WCAG AA: 4.62:1 on light green bg */ --danger: #dc2626; /* WCAG AA: 4.63:1 on white (was #ef4444 = 3.76) */ --font-nav: "Inter", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --primary-font: var(--font-body); --font-heading: var(--font-body); --glass: rgba(255, 255, 255, 0.8); --glass-border: rgba(255, 255, 255, 0.2); /* ─── Catalog & Flash Sale Tokens ─── */ --catalog-min-height: 800px; --catalog-padding-bottom: 60px; --touch-target: 44px; /* Semantic Mapping (Linked to Dynamic Theme) */ --fs-red: var(--cta, #e53e3e); --fs-orange: var(--accent, #f37021); --fs-orange-dark: color-mix(in srgb, var(--fs-orange) 85%, #000); --fs-yellow: #ffec00; --fs-green: #10b981; /* Gradients */ --fs-yellow-gradient: linear-gradient(135deg, #facc15, #f59e0b); --fs-green-gradient: linear-gradient(90deg, #34d399, var(--fs-green)); --fs-danger-gradient: linear-gradient(90deg, #f97316, var(--fs-red)); /* Surfaces & Borders */ --fs-surface: #fafafa; --fs-border: #e8e8e8; --fs-border-light: #f0f0f0; --fs-border-hover: #e2e8f0; --fs-bg-light: #fff5f5; /* Text Colors */ --fs-text: #1a1a1a; --fs-text-body: #334155; --fs-text-muted: #737373; /* WCAG AA: 4.65:1 on white (was #9e9e9e = 2.68) */ --fs-text-meta: #6b7280; --fs-text-dim: #6b7280; /* WCAG AA: 4.98:1 on white (was #9ca3af = 2.54) */ --fs-text-light: #8b95a5; /* Decorative only: 3.52:1 (was #cbd5e1 = 1.48) */ /* Product Details - Typography & Colors */ --product-title-size: 11px; --product-title-size-sm: 13px; --product-price-size: 13px; --product-price-size-sm: 15px; --product-meta-size: 12px; --product-badge-size: 10px; --product-text-main: #0f172a; --product-text-muted: #475569; --product-border: #f1f5f9; --product-bg: #ffffff; /* Typography Scale */ --text-xs: 10px; --text-sm: 11px; --text-base: 12px; --text-md: 13px; --text-lg: 14px; --text-xl: 16px; --text-2xl: 18px; /* Legacy Tokooke Aliases (To avoid breaking old styles) */ --toko-green: var(--primary); --toko-green-dark: var(--slate-800); --toko-green-light: var(--slate-100); --toko-red: var(--cta); --toko-orange: var(--accent); --toko-text: var(--slate-800); --toko-text-secondary: var(--slate-500); --toko-border: var(--slate-200); --toko-surface: var(--slate-50); --toko-white: var(--white); }