:root {
  /* Paleta Shopient Theme - Cores Base */
  --bg-primary: #f5f6f8;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-surface-alt: #f0f2f5;
  --bg-glass: rgba(255, 255, 255, 0.95);
  --border-glass: rgba(226, 232, 240, 0.9);
  --bg-gradient-hero: radial-gradient(circle at 50% -20%, rgba(235, 90, 40, 0.12), rgba(245, 246, 248, 1) 75%);

  /* Shopient Brand Colors */
  --color-brand: #eb5a28;
  --color-brand-hover: #d84c1b;
  --color-brand-light: #fff2ed;
  --color-brand-dark: #b83a12;

  /* Shopient Header Specifics */
  --shopient-topbar-bg: #eb5a28;
  --shopient-topbar-text: #ffffff;
  --shopient-header-bg: #1c1f24;
  --shopient-nav-bg: #14171b;
  --shopient-search-bg: #272a31;
  --shopient-search-border: #3a3f4a;
  
  --color-accent: #10b981;
  --color-accent-hover: #059669;
  --color-accent-light: #d1fae5;
  
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  
  --color-danger: #ef4444;
  --color-danger-light: #fee2e2;
  
  --color-ml-yellow: #ffe600;
  --color-ml-blue: #2d3277;

  /* Gradientes Shopient */
  --gradient-brand: linear-gradient(135deg, #eb5a28 0%, #f77f00 100%);
  --gradient-brand-subtle: linear-gradient(135deg, rgba(235, 90, 40, 0.08) 0%, rgba(247, 127, 0, 0.08) 100%);
  --gradient-accent: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-accent-subtle: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);
  --gradient-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-welcome: linear-gradient(135deg, rgba(235, 90, 40, 0.06) 0%, rgba(16, 185, 129, 0.06) 100%);

  /* Tipografia & Textos */
  --text-main: #1c1f24;
  --text-secondary: #4b5260;
  --text-muted: #6c7584;
  --text-light: #9aa1ad;
  --text-inverse: #ffffff;

  /* Bordas & Sombras */
  --border-subtle: #e5e8ec;
  --border-card: #e2e5ea;
  --border-focus: #eb5a28;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 20px -3px rgba(28, 31, 36, 0.08), 0 4px 6px -4px rgba(28, 31, 36, 0.03);
  --shadow-card: 0 4px 20px -2px rgba(28, 31, 36, 0.05), 0 2px 6px -1px rgba(28, 31, 36, 0.03);
  --shadow-card-hover: 0 20px 35px -5px rgba(28, 31, 36, 0.12), 0 10px 15px -5px rgba(28, 31, 36, 0.05);
  --shadow-glow: 0 0 25px -2px rgba(235, 90, 40, 0.3);
  --shadow-cta: 0 10px 25px -4px rgba(235, 90, 40, 0.38);

  /* Espaçamentos & Raios */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Tipografia */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', var(--font-sans);

  /* Transições Suaves */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg-primary: #101216;
  --bg-surface: #181b20;
  --bg-surface-elevated: #22262d;
  --bg-surface-alt: #1e2228;
  --bg-glass: rgba(24, 27, 32, 0.95);
  --border-glass: rgba(255, 255, 255, 0.08);
  --bg-gradient-hero: radial-gradient(circle at 50% -20%, rgba(235, 90, 40, 0.18), rgba(16, 18, 22, 1) 75%);

  --text-main: #f3f5f8;
  --text-secondary: #cbd2dc;
  --text-muted: #949da9;
  --text-light: #677180;

  --border-subtle: #242831;
  --border-card: #2c323d;
  --border-focus: #f77f00;

  --gradient-welcome: linear-gradient(135deg, rgba(235, 90, 40, 0.14) 0%, rgba(16, 185, 129, 0.12) 100%);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 20px 35px -5px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 30px -2px rgba(235, 90, 40, 0.45);
  --shadow-cta: 0 10px 25px -4px rgba(235, 90, 40, 0.45);
}