/* ============================================================
   Zoukei 2.0 — fundação de UI compartilhada (Loja · Saúde · Frete)
   Tema de cor (data-color) + claro/escuro (data-theme) + grid de cards.
   Espelha o sistema da V1 (extraído de assets/style.css).
   ============================================================ */

:root{
  /* ---- neutros (CLARO, canônico V1) ---- */
  --bg:#f4f6fb; --panel:#ffffff; --panel-2:#f9fafb;
  --text:#111827; --muted:#5a6470; --line:#e5e7eb; --line-strong:#d6dbe6;
  /* aliases p/ o CSS já existente das páginas */
  --card:var(--panel); --ink:var(--text);

  /* ---- accent (tema padrão: gold / Zoukei Original) ---- */
  --accent:#c9a34a; --accent-2:#f5d77b; --accent-rgb:201,163,74;
  --accent-d:color-mix(in srgb, var(--accent) 76%, #000);
  --accent-text:#1a1207;

  /* ---- semânticos ---- */
  --ok:#1f8a4c; --err:#c0392b; --green:#16a34a; --red:#dc2626; --warn:#b07a18; --star:#f59e0b;

  /* ---- elevação / forma ---- */
  --shadow-rgb:15,23,42;
  --shadow:0 18px 45px rgba(var(--shadow-rgb),.08);
  --shadow-soft:0 8px 22px rgba(var(--shadow-rgb),.06);
  --radius:14px; --r-2xs:6px; --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-pill:999px;
  --font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;

  color-scheme:light;
}

/* ============ MODO ESCURO ============ */
/* manual: data-theme="dark"  ·  auto: segue o SO via @media (data-theme="auto" ou ausente) */
html[data-theme="dark"]{
  --bg:#080b12; --panel:#10141d; --panel-2:#151b27;
  --text:#f8fafc; --muted:#a7b0c0; --line:#242b3a; --line-strong:#334155;
  --shadow-rgb:0,0,0;
  --shadow:0 18px 45px rgba(0,0,0,.32); --shadow-soft:0 8px 22px rgba(0,0,0,.24);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"], html:not([data-theme]){
    --bg:#080b12; --panel:#10141d; --panel-2:#151b27;
    --text:#f8fafc; --muted:#a7b0c0; --line:#242b3a; --line-strong:#334155;
    --shadow-rgb:0,0,0;
    --shadow:0 18px 45px rgba(0,0,0,.32); --shadow-soft:0 8px 22px rgba(0,0,0,.24);
    color-scheme:dark;
  }
}
html[data-theme="light"]{ color-scheme:light; }
/* tinge o fundo escuro com 6% do accent (igual à V1) */
html[data-theme="dark"]{ --bg:color-mix(in srgb, var(--accent) 6%, #080b12); }
@media (prefers-color-scheme: dark){
  html[data-theme="auto"], html:not([data-theme]){ --bg:color-mix(in srgb, var(--accent) 6%, #080b12); }
}

/* ============ TEMAS DE COR (data-color) — só trocam o accent ============ */
html[data-color="gold"]    { --accent:#c9a34a; --accent-2:#f5d77b; --accent-rgb:201,163,74;  --accent-text:#1a1207; }
html[data-color="medical"] { --accent:#0284c7; --accent-2:#38bdf8; --accent-rgb:2,132,199;   --accent-text:#ffffff; }
html[data-color="indigo"]  { --accent:#4f46e5; --accent-2:#818cf8; --accent-rgb:79,70,229;   --accent-text:#ffffff; }
html[data-color="emerald"] { --accent:#10b981; --accent-2:#34d399; --accent-rgb:16,185,129;  --accent-text:#04291d; }
html[data-color="rose"]    { --accent:#e11d48; --accent-2:#fb7185; --accent-rgb:225,29,72;   --accent-text:#ffffff; }
html[data-color="purple"]  { --accent:#8b5cf6; --accent-2:#a78bfa; --accent-rgb:139,92,246;  --accent-text:#ffffff; }
html[data-color="orange"]  { --accent:#f97316; --accent-2:#fb923c; --accent-rgb:249,115,22;  --accent-text:#1a0f02; }
html[data-color="graphite"]{ --accent:#475569; --accent-2:#94a3b8; --accent-rgb:71,85,105;   --accent-text:#ffffff; }
html[data-color="expo3d"]  { --accent:#a855f7; --accent-2:#e9d5ff; --accent-rgb:168,85,247;  --accent-text:#ffffff; }

/* ============ BARRA DE CONTROLES (tema · idioma · escuro) ============ */
.zk-controls{display:inline-flex;align-items:center;gap:6px}
.zk-ctrl{position:relative}
.zk-ctrl-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--panel);color:var(--text);font:inherit;font-weight:700;font-size:13px;
  cursor:pointer;transition:border-color .14s,background .14s;line-height:1}
.zk-ctrl-btn:hover{border-color:var(--accent)}
.zk-ctrl-btn .zk-sw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:var(--accent);flex:0 0 auto}
.zk-ctrl-btn svg{width:17px;height:17px;flex:0 0 auto}
.zk-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:200;min-width:172px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:6px;display:none}
.zk-ctrl.open .zk-pop{display:block}
.zk-opt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-xs);
  background:none;color:var(--text);font:inherit;font-weight:600;font-size:13px;cursor:pointer;text-align:left}
.zk-opt:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.zk-opt.on{background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:800}
.zk-opt .zk-sw{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex:0 0 auto}
.zk-opt .zk-flag{font-size:16px;line-height:1}
.zk-opt .zk-check{margin-left:auto;color:var(--accent);font-weight:900}

/* ============ GRID DE CARDS AUTO-RESPONSIVO ============ */
/* widescreen mostra mais cards lado a lado; celular empilha. */
.zk-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.zk-grid.wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.zk-grid.tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* card base reutilizável (alinha com .card existente) */
.zk-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:18px}
@media (max-width:560px){ .zk-card{padding:15px} }

html.zk-ready, html.zk-ready body{ transition:background-color .2s ease; }