:root {
  --color-brand-volt: #d4fc56;
  --color-brand-petroleum: #1e3138;
  --color-accent-olive-container: #95bd00;
  --color-accent-lime-pressed: #b6e61f;
  --color-white: #ffffff;
  --color-whatsapp: #25d366;
  --sold-count-accent: var(--color-status-warning-solid);
  --cart-price-accent: var(--color-accent-lime-pressed);
  --fav-heart-accent: var(--color-status-danger-neon-hover);
  --fav-heart-accent-hover: var(--color-status-danger-neon);
  --tag-blue-bg: #dee8fc;
  --tag-blue-text: var(--color-status-info-solid-active);
  --tag-orange-bg: #f6ddc1;
  --tag-orange-text: var(--color-status-warning-solid-text);
  --tag-amber-bg: #ffe6c2;
  --tag-amber-text: var(--color-status-warning-solid-text);
  --badge-sale-bg: var(--color-status-danger-solid);
  --badge-new-bg: var(--color-status-alert-vivid);
  --badge-featured-bg: var(--color-status-info-solid-active);
  --color-status-alert-vivid: #ff9500;
  --color-status-info-solid: #0284c7;
  --color-status-info-solid-active: #2563eb;
  --color-status-success-solid: #16a34a;
  --color-status-danger-solid: #dc2626;
  --color-status-warning-solid: #d97706;

  --color-surface-canvas-light: #f8fafc;
  --color-surface-inset-light: #f1f5f9;
  --color-text-secondary-slate: #475569;
  --color-border-subtle-slate: #e2e8f0;
  --color-border-strong-slate: #cbd5e1;
  --color-volt-surface: #0c1519;
  --color-volt-surface-container-low: #141d21;
  --color-volt-surface-container: #182125;
  --color-volt-surface-container-high: #222b30;
  --color-volt-on-surface-variant: #c5c9ad;
  --color-volt-outline: #8f937a;
  --color-volt-outline-variant: #444934;
  --color-volt-surface-tint: #aed500;
  --color-volt-primary-container: #c8f322;
  --color-volt-on-primary-container: #576c00;
  --color-volt-secondary-container: #384951;
  --color-olive-outline: #757963;
  --color-olive-on-primary-container: #374800;
  --color-neutral-ghost-hover: #31454f;
  --color-status-danger-neon: #ff453a;
  --color-status-danger-neon-hover: #e03228;
  --color-status-alert-neon: #ff9f0a;
  --color-status-info-neon: #0a84ff;
  --color-status-info-neon-alt: #29b6f6;
  --color-status-info-neon-hover: #0066cc;
  --color-status-success-neon: #30d158;
  --color-status-danger-solid-pressed: #b91c1c;
  --color-status-warning-solid-text: #b45309;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-size-base: 1rem;
  --font-weight-base: 400;
  --font-weight-emphasis: 700;
  --font-weight-price: 800;
  --line-height-base: 1.5;
}

[data-theme="light"] {
  --bg-canvas: var(--color-surface-canvas-light);
  --surface-subtle: var(--color-white);
  --surface-default: var(--color-surface-inset-light);
  --border-subtle: var(--color-border-subtle-slate);
  --text-primary: var(--color-brand-petroleum);
  --text-secondary: var(--color-text-secondary-slate);
  --text-faint: var(--color-olive-outline);
  --interactive-primary: var(--color-brand-petroleum);
  --interactive-focus: var(--color-accent-olive-container);
  --price-accent: var(--color-info-hover);
  --danger-accent-text: var(--color-status-danger-solid-pressed);
  --success-accent-text: var(--color-olive-on-primary-container);
  --share-hover-bg: var(--color-border-strong-slate);

  --color-danger: var(--color-status-danger-solid);
  --color-danger-hover: var(--color-status-danger-solid-pressed);
  --color-danger-surface: rgba(220, 38, 38, 0.1);
  --color-danger-border: rgba(220, 38, 38, 0.25);
  --color-warning: var(--color-status-warning-solid);
  --color-info: var(--color-status-info-solid);
  --color-info-hover: var(--color-status-info-solid-active);
  --color-success: var(--color-status-success-solid);

  --brand-title: var(--color-brand-petroleum);
  --active-pill-bg: var(--interactive-primary);
  --active-pill-text: var(--color-white);
  --glass-header: rgba(255, 255, 255, 0.9);
  --floating-btn-bg: rgba(255, 255, 255, 0.92);
  --floating-btn-bg-hover: var(--color-white);
  --skeleton-base: rgba(0, 0, 0, 0.06);
  --skeleton-pulse: rgba(0, 0, 0, 0.12);
  --grid-line: rgba(0, 0, 0, 0.035);
}

[data-theme="dark"] {
  --bg-canvas: var(--color-volt-surface);
  --surface-subtle: var(--color-volt-surface-container-low);
  --surface-default: var(--color-volt-surface-container);
  --border-subtle: var(--color-volt-outline-variant);
  --text-primary: var(--color-white);
  --text-secondary: var(--color-volt-on-surface-variant);
  --text-faint: var(--color-volt-outline);
  --interactive-primary: var(--color-brand-volt);
  --price-accent: var(--color-status-info-neon-alt);
  --danger-accent-text: var(--color-status-danger-neon);
  --success-accent-text: var(--color-status-success-neon);
  --share-hover-bg: var(--color-neutral-ghost-hover);
  --interactive-focus: var(--color-brand-volt);

  --color-danger: var(--color-status-danger-neon);
  --color-danger-hover: var(--color-status-danger-neon-hover);
  --color-danger-surface: rgba(255, 69, 58, 0.1);
  --color-danger-border: rgba(255, 69, 58, 0.2);
  --color-warning: var(--color-status-alert-neon);
  --color-info: var(--color-status-info-neon);
  --color-info-hover: var(--color-status-info-neon-hover);
  --color-success: var(--color-status-success-neon);

  --brand-title: var(--color-brand-volt);
  --active-pill-bg: var(--interactive-primary);
  --active-pill-text: var(--color-volt-surface);
  --glass-header: rgba(7, 15, 19, 0.85);
  --floating-btn-bg: rgba(34, 43, 48, 0.85);
  --floating-btn-bg-hover: var(--color-volt-surface-container-high);
  --skeleton-base: rgba(218, 228, 233, 0.08);
  --skeleton-pulse: rgba(218, 228, 233, 0.14);
  --grid-line: rgba(218, 228, 233, 0.035);
}