/* =============================================
   VAPE & MORE — THEME
   Master color & typography tokens.
   All other CSS files reference these variables.
   To retheme: edit ONLY this file.
   ============================================= */

:root {
    /* --------------------------------------------------
       PRIMARY PALETTE  (neon green leads)
    -------------------------------------------------- */
    --color-primary: #22C55E; /* green — main CTA / lead accent          */
    --color-primary-dark: #16A34A; /* hover / pressed                         */
    --color-primary-rgb: 34, 197, 94;
    --color-accent: #A3E635; /* lime-yellow green — secondary highlights */
    --color-accent-dark: #84CC16;
    --color-accent-rgb: 163, 230, 53;
    --color-tertiary: #4ADE80; /* lighter green — soft glow / badges      */
    --color-tertiary-dark: #22C55E;
    --color-tertiary-rgb: 74, 222, 128;
    --color-neon: #CCFF00; /* neon yellow-green — extreme highlights  */
    --color-neon-rgb: 204, 255, 0;
    --color-danger: #EF4444; /* red — OFERTAS / sale / alert labels     */
    --color-danger-rgb: 239, 68, 68;
    /* --------------------------------------------------
       NEUTRALS  (dark-first)
    -------------------------------------------------- */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-text: #FFFFFF; /* reversed: white on dark backgrounds      */
    --color-text-muted: #A1A1AA; /* zinc-400                                 */
    --color-text-light: #71717A; /* zinc-500                                 */
    --color-bg: #000000; /* page background — pure black             */
    --color-bg-soft: #0D0D0D; /* card / section surface — near-black      */
    --color-bg-warm: #111111; /* alternate section bg — dark gray         */
    --color-border: #1F1F1F; /* subtle border on dark surface            */
    --color-border-light: #2A2A2A; /* slightly lighter border                  */
    --color-announcement-bar: #1a3a1a; /* dark green — top announcement strip      */
    --color-announcement-icon: #22C55E; /* icon color inside announcement bar       */
    /* --------------------------------------------------
       SEMANTIC ALIASES
    -------------------------------------------------- */
    --color-cta: var(--color-primary); /* green */
    --color-cta-text: var(--color-black); /* black text on green button */
    --color-cta-hover: var(--color-primary-dark);
    --color-highlight: var(--color-neon);
    --color-badge: var(--color-primary); /* green badges */
    --color-badge-text: var(--color-black);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-accent);
    /* --------------------------------------------------
       GLOW / ALPHA HELPERS
    -------------------------------------------------- */
    --glow-primary: rgba(34, 197, 94, 0.20);
    --glow-primary-strong: rgba(34, 197, 94, 0.40);
    --glow-accent: rgba(163, 230, 53, 0.22);
    --glow-accent-strong: rgba(163, 230, 53, 0.45);
    /* --------------------------------------------------
       TYPOGRAPHY
    -------------------------------------------------- */
    --font-display: 'Luckiest Guy', cursive;
    --font-body: 'Poppins', sans-serif;
    --stroke-display: 2px var(--color-black);
    /* --------------------------------------------------
       SHAPE & SPACING
    -------------------------------------------------- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 50px;
    /* --------------------------------------------------
       SHADOWS  (green-tinted on dark bg)
    -------------------------------------------------- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.60);
    --shadow-card-hover: 0 20px 50px var(--glow-primary);
    --shadow-btn: 0 8px 24px var(--glow-primary);
    --shadow-btn-hover: 0 12px 36px var(--glow-primary-strong);
    /* --------------------------------------------------
       TRANSITIONS
    -------------------------------------------------- */
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease;
    --transition-slow: all 0.5s ease;
    /* --------------------------------------------------
       GRADIENTS
    -------------------------------------------------- */
    --gradient-bg: linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 50%, var(--color-bg-warm) 100%);
    --gradient-cta: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-neon) 100%);
}