/* ==========================================================================
   EzC Copos — Tokens de design
   Mesmos nomes e valores do assets/css/app.css do plugin EzCommerce,
   pra loja e painel falarem a mesma língua visual. Se o lojista trocar a
   cor de destaque no módulo "Aparência" do painel (futuro), esses valores
   passam a vir de wp_options via wp_add_inline_style() — ver inc/theme-setup.php.
   ========================================================================== */

:root {
  --ezc-bg: #fafafa;
  --ezc-surface: #ffffff;
  --ezc-field-bg: #f1f1f3;
  --ezc-border: #ececec;
  --ezc-border-strong: #d4d4d8;
  --ezc-text: #18181b;
  --ezc-text-muted: #8a8a94;
  --ezc-text-soft: #a1a1aa;
  --ezc-accent: #18181b;
  --ezc-accent-soft: #f4f4f5;
  --ezc-on-accent: #ffffff;
  --ezc-success: #15803d;
  --ezc-success-bg: #f0fdf4;
  --ezc-warning: #b45309;
  --ezc-warning-bg: #fffbeb;
  --ezc-danger: #b91c1c;
  --ezc-danger-bg: #fef2f2;
  --ezc-info: #4338ca;
  --ezc-info-bg: #f5f3ff;

  --ezc-radius-sm: 6px;
  --ezc-radius-md: 10px;
  --ezc-radius-lg: 14px;

  --ezc-space-xs: 4px;
  --ezc-space-sm: 8px;
  --ezc-space-md: 16px;
  --ezc-space-lg: 24px;
  --ezc-space-xl: 32px;
  --ezc-space-2xl: 48px;

  --ezc-shadow-sm: none;
  --ezc-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

  --ezc-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --ezc-container: 1376px;
  --ezc-header-h: 72px;
}

[data-theme="dark"] {
  --ezc-bg: #0a0a0b;
  --ezc-surface: #131316;
  --ezc-field-bg: #1c1c20;
  --ezc-border: #232326;
  --ezc-border-strong: #3a3a40;
  --ezc-text: #f4f4f5;
  --ezc-text-muted: #a1a1aa;
  --ezc-text-soft: #7a7a83;
  --ezc-accent: #f4f4f5;
  --ezc-accent-soft: #1c1c1f;
  --ezc-on-accent: #0a0a0b;
  --ezc-success: #4ade80;
  --ezc-success-bg: rgba(74, 222, 128, 0.16);
  --ezc-warning: #fbbf24;
  --ezc-warning-bg: rgba(251, 191, 36, 0.16);
  --ezc-danger: #f87171;
  --ezc-danger-bg: rgba(248, 113, 113, 0.16);
  --ezc-info: #a5b4fc;
  --ezc-info-bg: rgba(165, 180, 252, 0.18);
}

/* Segue o tema claro/escuro do sistema quando o lojista não forçou nada
   explicitamente via [data-theme] no <html> (loja pública, sem toggle). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ezc-bg: #0a0a0b;
    --ezc-surface: #131316;
    --ezc-field-bg: #1c1c20;
    --ezc-border: #232326;
    --ezc-border-strong: #3a3a40;
    --ezc-text: #f4f4f5;
    --ezc-text-muted: #a1a1aa;
    --ezc-text-soft: #7a7a83;
    --ezc-accent: #f4f4f5;
    --ezc-accent-soft: #1c1c1f;
    --ezc-on-accent: #0a0a0b;
  }
}

* { box-sizing: border-box; }

body {
  background: var(--ezc-bg);
  color: var(--ezc-text);
  font-family: var(--ezc-font);
  margin: 0;
}

img { max-width: 100%; display: block; }

/* Ícones — ver inc/icons.php */
.ezc-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }