/*
Theme Name: Rogue
Theme URI: https://roguesupplements.co/
Description: Bespoke, builder-free WooCommerce theme for Rogue Supplements. Hand-coded PHP templates, brand design tokens, GSAP motion. Built to pair with the MP13 plugin suite.
Author: MP13
Author URI: https://mp13.eu/
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mp13-rogue
Tags: woocommerce, custom, ecommerce
*/

/* Real styles live in assets/css/. This file is the WordPress theme header + token layer only. */

:root {
	/* ---- Rogue brand tokens (exact brand hexes; dark base, neon accents) ---- */
	/* Raw brand palette — source of truth from brand guide */
	--rg-black:        #000000;   /* Primary */
	--rg-grey:         #E6E6E6;   /* Secondary */
	--rg-charcoal:     #121212;   /* Dark Charcoal */
	--rg-white:        #FFFFFF;
	--rg-volt:         #A9CF3F;   /* Volt Green */
	--rg-violet:       #7B4AA8;   /* Accent violet */
	--rg-pink:         #DB1E79;   /* Gradient Pink */

	/* Surfaces — dark base throughout */
	--rg-bg:            var(--rg-black);             /* #000 site canvas — black is the site default */
	--rg-surface:      #1a1a1a;                      /* raised panel */
	--rg-surface-2:    #232323;                      /* card */
	--rg-ink:          var(--rg-white);              /* primary text on dark (21:1) */
	--rg-ink-muted:    #B8B8B8;                      /* secondary text (~8:1 on #121212) */

	/* Brand roles */
	--rg-primary:      var(--rg-volt);               /* volt green = primary CTA */
	--rg-primary-ink:  var(--rg-black);              /* black text on volt (contrast ~13:1) */
	--rg-accent:       var(--rg-violet);             /* violet accent */
	--rg-accent-ink:   var(--rg-white);              /* text on violet (~4.6:1) */

	/* Heading colors per brand: H1 volt, H2 violet, H3 volt */
	--rg-h1:           var(--rg-volt);
	--rg-h2:           var(--rg-violet);
	--rg-h3:           var(--rg-volt);

	/* Signature gradients — neon, multi-stop (violet → pink → volt energy) */
	--rg-grad-hero:    linear-gradient(135deg, #7B4AA8 0%, #DB1E79 55%, #A9CF3F 130%);
	--rg-grad-accent:  linear-gradient(120deg, #DB1E79 0%, #7B4AA8 100%);
	--rg-grad-volt:    linear-gradient(120deg, #A9CF3F 0%, #7cd66a 100%);

	/* Radii — generous, per house style */
	--rg-r-sm: 10px;
	--rg-r-md: 18px;
	--rg-r-lg: 28px;
	--rg-r-xl: 40px;
	--rg-r-pill: 999px;

	/* Elevation — layered dropshadows for depth */
	--rg-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.5);
	--rg-shadow-2: 0 14px 40px rgba(0, 0, 0, 0.6);
	--rg-shadow-glow: 0 0 44px rgba(169, 207, 63, 0.45);   /* volt glow */
	--rg-shadow-glow-pink: 0 0 44px rgba(219, 30, 121, 0.45);

	/* Glass / blur (glassmorphism) on dark charcoal */
	--rg-glass-bg:   rgba(26, 26, 26, 0.55);
	--rg-glass-brd:  rgba(255, 255, 255, 0.12);
	--rg-blur:       saturate(150%) blur(16px);

	/* Motion */
	--rg-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo-ish */
	--rg-dur-fast:   180ms;
	--rg-dur:        420ms;

	/* Z-index scale (semantic, no magic 9999s) */
	--rg-z-dropdown: 100;
	--rg-z-sticky:   200;
	--rg-z-backdrop: 300;
	--rg-z-drawer:   400;
	--rg-z-toast:    500;
	--rg-z-tooltip:  600;

	/* Layout */
	--rg-container: 1200px;
	--rg-gap: clamp(1rem, 3vw, 2.5rem);
}

@media (prefers-reduced-motion: reduce) {
	:root { --rg-dur-fast: 1ms; --rg-dur: 1ms; }
}