/* GAMelo Design Tokens — brand identity restored to the approved BLUE palette per the current reference design (logo, buttons, hero, active nav state, badges all read blue). Same token NAMES as before on purpose: nearly every component in this theme reads colors through these variables rather than hardcoding hex, so changing the values here is what makes the palette cascade through the whole site without touching component markup or PHP logic. Store name, product catalog, wallet, and digital-delivery features are unchanged — only the color identity below. --gm-red is kept as a semantic-only color (discount badges, out-of-stock, error states) — it is never the brand/gradient color. */ :root{ --gm-bg: #F7F7F9; --gm-surface: #FFFFFF; --gm-elevated: #F1F2F5; --gm-border: #E7E8EC; --gm-text: #16181D; --gm-muted: #8A8F9E; /* Brand blue — matches the reference GAMELO logo/CTA blue. --gm-blue-1 is the primary brand blue (buttons, active states, badges, eyebrow), --gm-blue-2 is the darker stop used in the brand gradient. */ --gm-blue-1: #1D6FEB; --gm-blue-2: #0B4FCB; --gm-gradient: linear-gradient(120deg, var(--gm-blue-1), var(--gm-blue-2)); --gm-green: #22C55E; --gm-amber: #F5820A; --gm-red: #FF2E4D; --gm-radius-sm: 8px; --gm-radius-md: 12px; --gm-radius-lg: 16px; --gm-radius-xl: 20px; --gm-radius-pill: 999px; --gm-space-1: 4px; --gm-space-2: 8px; --gm-space-3: 12px; --gm-space-4: 16px; --gm-space-6: 24px; --gm-space-8: 32px; --gm-font-display: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --gm-font-body: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; --gm-font-mono: 'IBM Plex Mono', 'Courier New', monospace; --gm-hero-bg-gradient: linear-gradient(120deg, #EAF1FE 0%, #F6F9FF 55%, #EAF1FE 100%); --gm-hero-scrim-gradient: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 38%, rgba(255,255,255,0.15) 68%, rgba(255,255,255,0) 100%); } html[dir="rtl"] body { direction: rtl; } html[dir="ltr"] body { direction: ltr; } /* Dark theme — toggled via a data attribute on , set by the small inline script in header.php BEFORE first paint (reads the saved choice from localStorage) so there's no flash of the wrong theme, and mirrored by the toggle button in the header (assets/js/app.js). Every component in this theme reads colors through the --gm-* variables below rather than hardcoding hex, so this cascades through the whole site with no markup changes needed anywhere else. */ html[data-gm-theme="dark"]{ --gm-bg: #0A0E1A; --gm-surface: #121826; --gm-elevated: #1A2233; --gm-border: #262F42; --gm-text: #F5F6FA; --gm-muted: #8B93A7; --gm-blue-1: #2E7DFF; --gm-blue-2: #1657D6; --gm-gradient: linear-gradient(120deg, var(--gm-blue-1), var(--gm-blue-2)); --gm-green: #2ED573; --gm-amber: #FFA940; --gm-red: #FF4D6A; /* The hero banner's background/scrim in components.css are a deliberate always-white gradient in the light design (so the character cutout never looks washed out against it) — that same white would be a jarring light box in the middle of an otherwise-dark page, so both get a dark equivalent here rather than reading from --gm-surface directly (the scrim specifically needs to fade to fully transparent on the character's side, which a plain variable substitution alone doesn't express). */ --gm-hero-bg-gradient: linear-gradient(120deg, #0F1729 0%, #0B1220 55%, #0F1729 100%); --gm-hero-scrim-gradient: linear-gradient(90deg, rgba(10,14,26,0.94) 0%, rgba(10,14,26,0.85) 38%, rgba(10,14,26,0.18) 68%, rgba(10,14,26,0) 100%); } /* Defensive second layer (v1.2.0): forces direction from the body class rather than relying solely on the tag's dir attribute, in case any other active plugin ever rewrites that attribute after this theme's PHP has already run (output buffering, a caching layer, etc.). GAMelo is Arabic-first, so this defaults to RTL and only flips for an explicit English site language — same logic as gamelo_html_attributes() in functions.php, intentionally duplicated here as a fallback, not a replacement for that fix. */ body.gamelo-theme { direction: rtl; unicode-bidi: embed; } html[lang^="en"] body.gamelo-theme { direction: ltr; } body.woocommerce, body.gamelo-theme { background: var(--gm-bg); color: var(--gm-text); font-family: var(--gm-font-body); }