/**
 * AITopUp — design tokens
 * @package AITopUp
 */

:root {
  /* Brand accents — sky-blue palette */
  --color-accent-start: #00C8FF;
  --color-accent-end: #0052FF;
  --color-accent-primary: #0052FF;
  --color-accent-secondary: #0030CC;
  --color-accent-tertiary: #001A88;
  --color-accent-sky: #00C8FF;
  --color-accent-mid: #0052FF;
  --color-accent-deep: #001A88;
  --color-accent-warm: #33DDFF;

  /* Brand gradients — sky wash (no indigo) */
  --gradient-brand: linear-gradient(135deg, #00C8FF 0%, #0052FF 52%, #001A88 100%);
  --gradient-brand-shine: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  --gradient-border-conic: var(--gradient-brand);
  --gradient-logo: var(--gradient-brand);
  --gradient-primary: var(--gradient-brand);
  --gradient-text: var(--gradient-brand);
  --gradient-logo-wordmark: var(--gradient-brand);
  --gradient-logo-wordmark-light: linear-gradient(135deg, #00C8FF 0%, #0052FF 100%);
  --glow-layered-primary: 0 0 10px var(--glow-primary), 0 0 20px var(--glow-secondary);
  --glow-layered-soft: 0 0 14px var(--glow-primary), 0 0 24px rgba(0, 26, 136, 0.08);
  --elevation-1: 0 1px 4px rgba(0, 26, 136, 0.07), 0 1px 2px rgba(0, 82, 255, 0.04);
  --elevation-2: 0 4px 12px rgba(0, 26, 136, 0.09), 0 1px 3px rgba(0, 82, 255, 0.06);
  --elevation-3: 0 8px 24px rgba(0, 26, 136, 0.11), 0 2px 8px rgba(0, 82, 255, 0.08);
  --mesh-layer-1: radial-gradient(ellipse 70% 55% at 15% 8%, var(--glow-primary), transparent 58%);
  --mesh-layer-2: radial-gradient(ellipse 55% 45% at 85% 12%, var(--glow-secondary), transparent 52%);
  --mesh-layer-3: radial-gradient(ellipse 50% 38% at 55% 92%, var(--glow-secondary), transparent 48%);
  --mesh-layer-4: radial-gradient(ellipse 40% 35% at 72% 55%, var(--glow-primary), transparent 55%);
  --noise-opacity: 0.02;
  --zone-wash-opacity: 0.45;

  /* Semantic status */
  --success: #34D399;
  --warning: #FBBF24;
  --hot: #0052FF;

  /* Layout — single global content width */
  --site-max-w: 80rem;
  --site-pad-x: 1rem;
  --site-pad-x-md: 1.5rem;
  --max-w: var(--site-max-w);
  --radius: 1rem;
  --font: "Inter", system-ui, sans-serif;
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --header-h: 3.5rem;
  --wp-admin-bar-h: 0px;
  --header-offset: calc(var(--safe-top) + var(--header-h));
  --viewport-header-offset: calc(var(--wp-admin-bar-h) + var(--header-offset));
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --touch-min: 2.75rem;
  --transition-theme: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"],
:root:not([data-theme="light"]) {
  --color-bg: #040A18;
  --color-bg-footer: #020610;
  --color-bg-elevated: #081228;
  --color-fg: #E2E8F0;
  --color-fg-bright: #F8FAFC;

  --bg: var(--color-bg);
  --bg-footer: var(--color-bg-footer);
  --bg-elevated: var(--color-bg-elevated);
  --fg: var(--color-fg);
  --fg-bright: var(--color-fg-bright);

  --card: rgba(0, 15, 50, 0.60);
  --card-hover: rgba(0, 25, 75, 0.75);
  --border: rgba(100, 140, 255, 0.14);
  --border-glow: rgba(0, 200, 255, 0.28);
  --muted: #94A3B8;
  --muted-dim: #64748B;
  --header-bg: rgba(4, 10, 24, 0.97);
  --header-scrolled-bg: rgba(2, 6, 16, 0.99);
  --nav-mobile-bg: #040A18;
  --nav-backdrop-bg: rgba(2, 6, 16, 0.75);
  --input-bg: rgba(0, 12, 40, 0.65);
  --surface-muted: rgba(0, 10, 35, 0.40);
  --surface-muted-2: rgba(0, 12, 40, 0.45);
  --surface-pill: rgba(0, 12, 40, 0.65);
  --surface-chip: rgba(0, 10, 38, 0.50);
  --surface-chip-hover: rgba(0, 20, 68, 0.70);
  --surface-callout: rgba(0, 12, 42, 0.55);
  --surface-sticky-cart: rgba(4, 10, 24, 0.95);
  --surface-chat: rgba(4, 10, 24, 0.75);
  --footer-bottom-bg: rgba(2, 6, 16, 0.65);

  --glow-primary: rgba(0, 82, 255, 0.45);
  --glow-secondary: rgba(0, 200, 255, 0.35);
  --glow-tertiary: rgba(0, 26, 136, 0.30);
  --glow-sky: rgba(0, 200, 255, 0.32);
  --neon-shadow: var(--glow-layered-primary);
  --accent-link: #00C8FF;
  --accent-surface: rgba(0, 82, 255, 0.11);
  --accent-surface-strong: rgba(0, 82, 255, 0.17);
  --accent-ring: rgba(0, 82, 255, 0.20);
  --accent-border: rgba(0, 200, 255, 0.30);
  --accent-border-strong: rgba(0, 82, 255, 0.40);
  --accent-focus-ring: rgba(0, 82, 255, 0.16);
  --scanline-color: rgba(0, 200, 255, 0.08);
  --tap-highlight: rgba(0, 82, 255, 0.14);
  --success-bg: rgba(16, 185, 129, 0.14);
  --warning-bg: rgba(245, 158, 11, 0.14);
  --hot-bg: rgba(0, 26, 136, 0.18);
  --callout-info-bg: rgba(0, 82, 255, 0.09);
  --callout-info-border: rgba(0, 200, 255, 0.28);
  --gradient-hero-mesh: var(--mesh-layer-1), var(--mesh-layer-2), var(--mesh-layer-3);
  --gradient-hero-overlay: linear-gradient(
    to bottom,
    rgba(0, 82, 255, 0.06) 0%,
    transparent 40%,
    rgba(0, 26, 136, 0.05) 70%,
    rgba(4, 10, 24, 0.35) 100%
  );
  --hero-spotlight: radial-gradient(ellipse 55% 45% at 50% 72%, rgba(0, 82, 255, 0.18), transparent 68%);
  --gradient-footer-cta: linear-gradient(135deg, rgba(0, 82, 255, 0.07) 0%, rgba(0, 26, 136, 0.05) 100%);
  --gradient-product-image: linear-gradient(135deg, rgba(0, 82, 255, 0.08), rgba(0, 26, 136, 0.08));
  --gradient-logo-icon: linear-gradient(135deg, rgba(0, 200, 255, 0.22), rgba(0, 82, 255, 0.20));
  --gradient-chat-border: linear-gradient(135deg, #229ED9, var(--color-accent-start), #229ED9);
  --mesh-opacity: 0.85;
  --mesh-glow-primary: var(--glow-primary);
  --mesh-glow-secondary: var(--glow-secondary);
  --mesh-glow-tertiary: var(--glow-secondary);
  --glass-inset: rgba(255, 255, 255, 0.04);
  --selection-bg: rgba(0, 82, 255, 0.28);
  --selection-fg: #FFFFFF;
  --scanline-opacity: 0.015;
  --surface-badge: var(--accent-surface);
  --accent-badge-glow: var(--glow-primary);
  --color-border-glow: var(--border-glow);
  --elevation-1: 0 2px 8px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 82, 255, 0.08);
  --elevation-2: 0 4px 16px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 82, 255, 0.10);
  --elevation-3: 0 8px 28px rgba(0, 0, 0, 0.26), 0 3px 10px rgba(0, 200, 255, 0.12);
  --shadow-card: var(--elevation-1);
  --shadow-card-hover: var(--elevation-2), 0 0 12px var(--glow-primary);
  --shadow-elevated: var(--elevation-3);
  --mobile-nav-shadow: -4px 0 16px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border);
  --mega-menu-bg: #040A18;
  --mega-menu-bg-light: #FFFFFF;
  --account-menu-bg: #040A18;
  --vignette-edge: radial-gradient(ellipse 120% 80% at 50% 50%, transparent 40%, rgba(2, 6, 16, 0.55) 100%);
  --starfield-opacity: 0.2;
  --holo-opacity: 0;
  --zone-wash-hero: linear-gradient(180deg, rgba(0, 82, 255, 0.05) 0%, transparent 40%);
  --zone-wash-shop: linear-gradient(180deg, rgba(0, 26, 136, 0.04) 0%, transparent 35%);
  --zone-wash-footer: linear-gradient(180deg, transparent 0%, rgba(0, 26, 136, 0.06) 100%);
  --btn-primary-fg: #FFFFFF;
  --image-brightness: 1;
  --neon-badge-fg: #0A0E1A;
  --sticky-cart-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border);
  color-scheme: dark;
}

[data-theme="light"] {
  --color-bg: #EEF5FF;
  --color-bg-footer: #E5EFFF;
  --color-bg-elevated: #FFFFFF;
  --color-fg: #0F172A;
  --color-fg-bright: #020617;

  --bg: var(--color-bg);
  --bg-footer: var(--color-bg-footer);
  --bg-elevated: var(--color-bg-elevated);
  --fg: var(--color-fg);
  --fg-bright: var(--color-fg-bright);

  --card: rgba(255, 255, 255, 0.88);
  --card-hover: rgba(255, 255, 255, 0.96);
  --border: rgba(0, 26, 136, 0.11);
  --border-glow: rgba(0, 82, 255, 0.26);
  --muted: #64748B;
  --muted-dim: #94A3B8;
  --header-bg: #FFFFFF;
  --header-scrolled-bg: #FFFFFF;
  --nav-mobile-bg: #FFFFFF;
  --nav-backdrop-bg: rgba(15, 23, 42, 0.2);
  --input-bg: rgba(255, 255, 255, 0.92);
  --surface-muted: rgba(218, 232, 255, 0.80);
  --surface-muted-2: rgba(218, 232, 255, 0.90);
  --surface-pill: rgba(255, 255, 255, 0.92);
  --surface-chip: rgba(255, 255, 255, 0.8);
  --surface-chip-hover: rgba(255, 255, 255, 0.96);
  --surface-callout: rgba(255, 255, 255, 0.92);
  --surface-sticky-cart: rgba(248, 250, 252, 0.97);
  --surface-chat: rgba(255, 255, 255, 0.92);
  --footer-bottom-bg: rgba(241, 245, 249, 0.92);

  --glow-primary: rgba(0, 82, 255, 0.22);
  --glow-secondary: rgba(0, 26, 136, 0.16);
  --glow-tertiary: rgba(0, 26, 136, 0.13);
  --glow-sky: rgba(0, 200, 255, 0.18);
  --neon-shadow: 0 0 10px var(--glow-primary), 0 0 20px var(--glow-secondary);
  --accent-link: #0044EE;
  --accent-surface: rgba(0, 82, 255, 0.07);
  --accent-surface-strong: rgba(0, 82, 255, 0.11);
  --accent-ring: rgba(0, 82, 255, 0.14);
  --accent-border: rgba(0, 82, 255, 0.26);
  --accent-border-strong: rgba(0, 82, 255, 0.34);
  --accent-focus-ring: rgba(0, 82, 255, 0.14);
  --scanline-color: rgba(0, 82, 255, 0.04);
  --tap-highlight: rgba(0, 82, 255, 0.09);
  --success: #059669;
  --success-bg: rgba(5, 150, 105, 0.1);
  --warning-bg: rgba(217, 119, 6, 0.1);
  --hot-bg: rgba(0, 26, 136, 0.10);
  --callout-info-bg: rgba(0, 82, 255, 0.05);
  --callout-info-border: rgba(0, 82, 255, 0.24);
  --gradient-hero-mesh: var(--mesh-layer-1), var(--mesh-layer-2), var(--mesh-layer-3);
  --gradient-hero-overlay: linear-gradient(
    to bottom,
    rgba(0, 82, 255, 0.04) 0%,
    transparent 42%,
    rgba(0, 26, 136, 0.03) 72%,
    rgba(238, 245, 255, 0.55) 100%
  );
  --hero-spotlight: radial-gradient(ellipse 50% 40% at 50% 70%, rgba(0, 82, 255, 0.10), transparent 65%);
  --gradient-footer-cta: linear-gradient(135deg, rgba(0, 82, 255, 0.04) 0%, rgba(0, 26, 136, 0.04) 100%);
  --gradient-product-image: linear-gradient(135deg, rgba(0, 82, 255, 0.06), rgba(0, 26, 136, 0.07));
  --gradient-logo-icon: linear-gradient(135deg, rgba(0, 200, 255, 0.15), rgba(0, 82, 255, 0.12));
  --gradient-chat-border: linear-gradient(135deg, #229ED9, var(--color-accent-start), #229ED9);
  --mesh-opacity: 0.35;
  --holo-opacity: 0;
  --starfield-opacity: 0;
  --vignette-edge: none;
  --zone-wash-hero: linear-gradient(180deg, rgba(0, 82, 255, 0.04) 0%, transparent 45%);
  --zone-wash-shop: linear-gradient(180deg, rgba(0, 26, 136, 0.03) 0%, transparent 40%);
  --zone-wash-footer: linear-gradient(180deg, transparent 0%, rgba(0, 26, 136, 0.04) 100%);
  --mesh-glow-primary: var(--glow-primary);
  --mesh-glow-secondary: var(--glow-secondary);
  --mesh-glow-tertiary: var(--glow-secondary);
  --glass-inset: rgba(255, 255, 255, 0.95);
  --selection-bg: rgba(0, 82, 255, 0.22);
  --selection-fg: #020617;
  --scanline-opacity: 0.01;
  --surface-badge: var(--accent-surface);
  --accent-badge-glow: var(--glow-primary);
  --color-border-glow: var(--border-glow);
  --elevation-1: 0 1px 4px rgba(0, 26, 136, 0.08), 0 1px 2px rgba(0, 82, 255, 0.05);
  --elevation-2: 0 4px 16px rgba(0, 26, 136, 0.10), 0 2px 5px rgba(0, 82, 255, 0.07);
  --elevation-3: 0 8px 28px rgba(0, 26, 136, 0.12), 0 3px 8px rgba(0, 82, 255, 0.09);
  --shadow-card: var(--elevation-1);
  --shadow-card-hover: var(--elevation-2);
  --shadow-elevated: var(--elevation-3);
  --mobile-nav-shadow: -4px 0 12px rgba(15, 23, 42, 0.06);
  --mega-menu-bg-light: #FFFFFF;
  --mega-menu-bg: #FFFFFF;
  --account-menu-bg: #FFFFFF;
  --btn-primary-fg: #FFFFFF;
  --image-brightness: 0.98;
  --neon-badge-fg: #FFFFFF;
  --sticky-cart-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
  color-scheme: light;
}