/* ============================================================
   OUROCELL — Design System
   ============================================================
   Camada visual global e reutilizável para todas as páginas do
   site (institucional, loja, carrinho, área do cliente e painel
   administrativo).

   Consolida os tokens e componentes que já existiam repetidos em
   index.html, admin.html e client-theme.css (as mesmas cores, os
   mesmos espaçamentos, os mesmos botões/cards) em UM único lugar,
   com os MESMOS nomes de variável/classe que o site já usa
   (--bg, --green, --card, .btn, .card, .badge, .field,
   .status-pill, .toast, .empty-state...). Isso é proposital: uma
   página que já usa essas classes não precisa mudar nada no HTML
   para adotar este arquivo — só troca CSS duplicado local pelo:

     <link rel="stylesheet" href="design-system.css">

   Como está linkado ANTES do <style> próprio de cada página, e as
   páginas existentes redeclaram localmente as mesmas regras, a
   ordem da cascata garante que nada muda visualmente hoje — este
   arquivo só passa a valer de fato quando uma página parar de
   duplicar essas regras localmente (fase seguinte: Serviços, Loja,
   Painel, Área do Cliente).

   Utilitários novos (grid, spacing, skeleton, a11y...) usam o
   prefixo "ds-" para nunca colidir com uma classe já existente.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — cores, espaçamento, raio, sombra, tipografia,
      transições, z-index.
   ------------------------------------------------------------ */
:root{
  /* Superfícies (preto profundo + grafite) — nomes idênticos aos
     já usados em index.html/admin.html/client-theme.css. */
  --bg:#0a0a0a;
  --bg-alt:#0d0d0d;
  --card:#131313;         /* "grafite" — cards, inputs, blocos */
  --card-border:#232323;
  --border-strong:#2a2a2a;
  --border-brand:rgba(34,197,94,.12);
  --surface-raised:#161616; /* levemente acima do grafite base (toasts, modais) */

  /* Verde Ourocell */
  --green:#22c55e;
  --green-dark:#16a34a;
  --green-soft:rgba(34,197,94,.08);
  --green-soft-border:#204d2c;
  --on-green:#04170a; /* texto sobre fundo verde */

  /* Texto */
  --text:#ffffff;
  --text-soft:#d4d4d4;
  --muted:#9ca3af;
  --dim:#6b7280;

  /* Semânticas (já usadas de forma inconsistente pelo site — agora com um só valor) */
  --success:#22c55e;
  --warning:#eab308;
  --danger:#ef4444;
  --danger-border:#7f1d1d;
  --info:#3b82f6;

  /* Espaçamento — escala em múltiplos de 4px */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  /* Raio de borda */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:999px;

  /* Sombra */
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 16px 40px rgba(0,0,0,.45);
  --shadow-glow:0 8px 24px rgba(34,197,94,.25);

  /* Tipografia */
  --font-heading:'Space Grotesk','Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
  --fs-xs:12px;   --fs-sm:13.5px; --fs-base:15px; --fs-md:16px;
  --fs-lg:18px;   --fs-xl:22px;   --fs-2xl:28px;  --fs-3xl:36px; --fs-4xl:48px;
  --lh-tight:1.15;
  --lh-normal:1.5;
  --lh-relaxed:1.7;

  /* Transições */
  --ease:cubic-bezier(.4,0,.2,1);
  --duration-fast:.15s;
  --duration-base:.25s;
  --duration-slow:.4s;

  /* Z-index — escala compartilhada para evitar conflito entre componentes */
  --z-dropdown:40;
  --z-header:50;
  --z-overlay:90;
  --z-drawer:91;
  --z-modal:100;
  --z-toast:200;
}

/* Breakpoints de referência (documentação — CSS não permite variável em
   @media, então mantenha estes valores em mente ao escrever novas regras):
     480px  → celular pequeno
     700px  → celular / tablet retrato (menu vira hambúrguer)
     900px  → tablet
     1280px → largura máxima de conteúdo */

/* ------------------------------------------------------------
   2. RESET & BASE
   Disponível para páginas novas que só incluam este arquivo.
   Idêntico ao reset que cada página já declara localmente, então
   não muda nada onde já existe um reset próprio.
   ------------------------------------------------------------ */
.ds-reset,
.ds-reset *{margin:0;padding:0;box-sizing:border-box;}

/* ------------------------------------------------------------
   3. TIPOGRAFIA
   ------------------------------------------------------------ */
.eyebrow{
  display:block;color:var(--green);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:var(--space-3);
}
.ds-text-muted{color:var(--muted);}
.ds-text-dim{color:var(--dim);}
.ds-text-green{color:var(--green);}
.ds-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ds-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ------------------------------------------------------------
   4. BOTÕES
   Variantes: .btn-primary (verde sólido), .btn-outline (contorno),
   .btn-ghost (sem borda), .btn-danger (ações destrutivas).
   Tamanhos: padrão, .btn-sm, .btn-lg. Estado: [disabled] e .is-loading.
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-full);
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-base);
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform var(--duration-fast) var(--ease),
             background var(--duration-fast) var(--ease),
             border-color var(--duration-fast) var(--ease),
             opacity var(--duration-fast) var(--ease);
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.btn:disabled,
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;}

.btn-primary{background:var(--green);color:var(--on-green);}
.btn-primary:hover:not(:disabled){background:var(--green-dark);}

.btn-outline{background:transparent;border-color:var(--border-strong);color:var(--text);}
.btn-outline:hover:not(:disabled){border-color:var(--green);}

.btn-ghost{background:transparent;border-color:transparent;color:var(--muted);}
.btn-ghost:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.04);}

.btn-danger{background:transparent;border:1px solid var(--danger-border);color:#f87171;}
.btn-danger:hover:not(:disabled){background:var(--danger-border);color:#fff;}

.btn-sm{padding:9px 18px;font-size:var(--fs-sm);}
.btn-lg{padding:16px 30px;font-size:var(--fs-md);}
.btn-block{width:100%;}

.btn.is-loading{position:relative;color:transparent !important;pointer-events:none;}
.btn.is-loading::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;color:var(--on-green);
  animation:ds-spin .7s linear infinite;
}
.btn-outline.is-loading::after,.btn-ghost.is-loading::after{color:var(--text);}

/* ------------------------------------------------------------
   5. CARDS
   ------------------------------------------------------------ */
.card{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius-lg);padding:var(--space-6);
  transition:border-color var(--duration-base) var(--ease),
             transform var(--duration-base) var(--ease),
             box-shadow var(--duration-base) var(--ease);
}
.card + .card{margin-top:var(--space-4);}
.card-hover:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.card-featured{border-color:var(--green);}
.card-flat{padding:0;overflow:hidden;}

/* ------------------------------------------------------------
   6. BADGES / STATUS PILLS
   ------------------------------------------------------------ */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--green-soft-border);background:var(--green-soft);
  color:var(--green);font-size:var(--fs-xs);font-weight:600;letter-spacing:.6px;
  padding:7px 14px;border-radius:var(--radius-full);text-transform:uppercase;
}
.badge-neutral{background:rgba(255,255,255,.04);border-color:var(--border-strong);color:var(--text-soft);}
.badge-warning{background:rgba(234,179,8,.1);border-color:rgba(234,179,8,.3);color:var(--warning);}
.badge-danger{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:var(--danger);}

.status-pill{
  display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;
  padding:5px 12px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.4px;
  white-space:nowrap;
}
.status-pill.success,.status-pill.active{background:rgba(34,197,94,.12);color:var(--green);}
.status-pill.warning,.status-pill.pending{background:rgba(234,179,8,.12);color:var(--warning);}
.status-pill.danger,.status-pill.inactive{background:rgba(239,68,68,.1);color:var(--danger);}
.status-pill.info{background:rgba(59,130,246,.12);color:var(--info);}

/* ------------------------------------------------------------
   7. FORMULÁRIOS / INPUTS
   ------------------------------------------------------------ */
.field{margin-bottom:var(--space-4);}
.field label{
  display:block;font-size:var(--fs-sm);font-weight:600;
  margin-bottom:var(--space-2);color:var(--text-soft);
}
.field input,
.field select,
.field textarea{
  width:100%;background:var(--bg-alt);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:13px 14px;color:var(--text);
  font-size:14.5px;font-family:inherit;transition:border-color var(--duration-fast) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus{outline:none;border-color:var(--green);}
.field input::placeholder,.field textarea::placeholder{color:#5a5a5a;}
.field input:disabled,.field select:disabled,.field textarea:disabled{opacity:.55;cursor:not-allowed;}
.field-hint{color:var(--dim);font-size:12px;margin-top:6px;}
.field-error{color:var(--danger);font-size:12.5px;margin-top:6px;display:none;}
.field-error.show{display:block;}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:var(--danger);}

/* ------------------------------------------------------------
   8. ÍCONES
   Caixa de ícone consistente (usada em serviços, benefícios,
   contato, logo) — substitui os emojis soltos por um contêiner
   padrão que aceita SVG ou emoji. Consolida .service-icon /
   .trust-icon / .info-icon / .trust-list-icon num único padrão
   para as próximas fases.
   ------------------------------------------------------------ */
.icon-box{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:42px;height:42px;border-radius:var(--radius-md);
  background:var(--card);border:1px solid var(--card-border);color:var(--green);
}
.icon-box svg{width:19px;height:19px;}
.icon-box-lg{width:52px;height:52px;border-radius:var(--radius-md);}
.icon-box-lg svg{width:23px;height:23px;}
.icon-box-brand{background:var(--green-soft);border-color:var(--green-soft-border);}
.icon-box-solid{background:linear-gradient(155deg,var(--green),var(--green-dark));color:var(--on-green);border:none;}

.icon-sm{width:16px;height:16px;}
.icon-md{width:20px;height:20px;}
.icon-lg{width:28px;height:28px;}

/* ------------------------------------------------------------
   9. LAYOUT — grid e utilitários de flex (prefixo ds- para nunca
   colidir com classes específicas de cada página)
   ------------------------------------------------------------ */
.ds-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.ds-container-wide{max-width:1280px;}
.ds-container-narrow{max-width:920px;}

.ds-grid{display:grid;gap:var(--space-6);}
.ds-grid-2{grid-template-columns:repeat(2,1fr);}
.ds-grid-3{grid-template-columns:repeat(3,1fr);}
.ds-grid-4{grid-template-columns:repeat(4,1fr);}
.ds-grid-auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}

.ds-flex{display:flex;}
.ds-flex-col{display:flex;flex-direction:column;}
.ds-items-center{align-items:center;}
.ds-justify-between{justify-content:space-between;}
.ds-justify-center{justify-content:center;}
.ds-flex-wrap{flex-wrap:wrap;}

.ds-stack{display:flex;flex-direction:column;}
.ds-stack > * + *{margin-top:var(--gap,var(--space-4));}
.ds-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,var(--space-3));}

.ds-gap-1{gap:var(--space-1);} .ds-gap-2{gap:var(--space-2);}
.ds-gap-3{gap:var(--space-3);} .ds-gap-4{gap:var(--space-4);}
.ds-gap-6{gap:var(--space-6);} .ds-gap-8{gap:var(--space-8);}

@media(max-width:900px){
  .ds-grid-3,.ds-grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
  .ds-grid-2,.ds-grid-3,.ds-grid-4{grid-template-columns:1fr;}
  .ds-container{padding:0 20px;}
}

/* ------------------------------------------------------------
   10. UTILITÁRIOS DE ESPAÇAMENTO
   ------------------------------------------------------------ */
.ds-mt-0{margin-top:0;} .ds-mt-2{margin-top:var(--space-2);}
.ds-mt-4{margin-top:var(--space-4);} .ds-mt-6{margin-top:var(--space-6);}
.ds-mt-8{margin-top:var(--space-8);} .ds-mb-2{margin-bottom:var(--space-2);}
.ds-mb-4{margin-bottom:var(--space-4);} .ds-mb-6{margin-bottom:var(--space-6);}
.ds-mb-8{margin-bottom:var(--space-8);}
.ds-p-4{padding:var(--space-4);} .ds-p-6{padding:var(--space-6);}

/* ------------------------------------------------------------
   11. SOMBRAS & BORDAS (utilitários)
   ------------------------------------------------------------ */
.ds-shadow-sm{box-shadow:var(--shadow-sm);}
.ds-shadow-md{box-shadow:var(--shadow-md);}
.ds-shadow-lg{box-shadow:var(--shadow-lg);}
.ds-shadow-glow{box-shadow:var(--shadow-glow);}
.ds-border{border:1px solid var(--card-border);}
.ds-border-strong{border:1px solid var(--border-strong);}
.ds-border-brand{border:1px solid var(--border-brand);}
.ds-radius-sm{border-radius:var(--radius-sm);}
.ds-radius-md{border-radius:var(--radius-md);}
.ds-radius-lg{border-radius:var(--radius-lg);}
.ds-radius-full{border-radius:var(--radius-full);}

/* ------------------------------------------------------------
   12. ANIMAÇÕES & TRANSIÇÕES
   ------------------------------------------------------------ */
@keyframes ds-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes ds-slide-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes ds-scale-in{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
@keyframes ds-spin{to{transform:rotate(360deg);}}
@keyframes ds-shimmer{100%{transform:translateX(100%);}}
@keyframes ds-bounce-y{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
@keyframes ds-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}

.ds-animate-fade-in{animation:ds-fade-in var(--duration-slow) var(--ease) both;}
.ds-animate-slide-up{animation:ds-slide-up var(--duration-slow) var(--ease) both;}
.ds-animate-scale-in{animation:ds-scale-in var(--duration-base) var(--ease) both;}

/* Padrão usado para revelar elementos ao rolar a página: a classe
   "reveal" é adicionada via JS (nunca no HTML estático), então o
   conteúdo nunca fica invisível se o JS falhar ou não rodar. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease), transform .5s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ------------------------------------------------------------
   13. ESTADOS DE LOADING
   ------------------------------------------------------------ */
.ds-spinner{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--border-strong);border-top-color:var(--green);
  animation:ds-spin .7s linear infinite;display:inline-block;
}
.ds-spinner-lg{width:32px;height:32px;border-width:3px;}

.ds-loading-dots{display:inline-flex;gap:4px;align-items:center;}
.ds-loading-dots span{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:ds-pulse 1.1s ease-in-out infinite;
}
.ds-loading-dots span:nth-child(2){animation-delay:.15s;}
.ds-loading-dots span:nth-child(3){animation-delay:.3s;}

/* ------------------------------------------------------------
   14. SKELETONS
   Placeholder de carregamento para cards/listas (produtos,
   pedidos, agendamentos, tabelas do painel) — para trocar telas
   em branco ou texto solto de "carregando..." por um esqueleto
   visual nas próximas fases, sem inventar dados.
   ------------------------------------------------------------ */
.skeleton{
  position:relative;overflow:hidden;background:var(--card);
  border-radius:var(--radius-sm);
}
.skeleton::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation:ds-shimmer 1.6s ease-in-out infinite;
}
.skeleton-text{height:14px;border-radius:6px;margin-bottom:8px;width:100%;}
.skeleton-text.short{width:60%;}
.skeleton-title{height:20px;border-radius:6px;margin-bottom:12px;width:45%;}
.skeleton-avatar{width:42px;height:42px;border-radius:50%;}
.skeleton-thumb{width:100%;height:140px;border-radius:var(--radius-md);}
.skeleton-card{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius-lg);padding:var(--space-4);
}
@media (prefers-reduced-motion: reduce){
  .skeleton::after{animation:none;}
}

/* ------------------------------------------------------------
   15. ACESSIBILIDADE
   ------------------------------------------------------------ */
.ds-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.ds-skip-link{
  position:absolute;left:12px;top:-48px;z-index:var(--z-toast);
  background:var(--green);color:var(--on-green);font-weight:600;
  padding:10px 16px;border-radius:var(--radius-sm);transition:top var(--duration-fast) var(--ease);
}
.ds-skip-link:focus{top:12px;}

/* Foco visível consistente em toda a interface para navegação por
   teclado — não se aplica a cliques de mouse (:focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:4px;
}

/* Alvos de toque com no mínimo ~40px em telas de toque, conforme
   recomendação de acessibilidade para mobile. */
@media(max-width:700px){
  .btn,.icon-btn,.filter-btn,.filter-chip{min-height:40px;}
}

/* ------------------------------------------------------------
   16. RESPONSIVO — utilitários de visibilidade
   ------------------------------------------------------------ */
.ds-hide-mobile{display:initial;}
.ds-hide-desktop{display:none;}
@media(max-width:700px){
  .ds-hide-mobile{display:none !important;}
  .ds-hide-desktop{display:initial !important;}
}

/* ------------------------------------------------------------
   17. TOASTS (padrão compartilhado — já usado por client-ui.js
   e admin.html; mantido aqui para reuso sem duplicar CSS)
   ------------------------------------------------------------ */
.toast-container{
  position:fixed;bottom:24px;right:24px;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:10px;max-width:340px;
}
.toast{
  background:var(--surface-raised);border:1px solid var(--card-border);border-left:3px solid var(--green);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:13.5px;color:var(--text);
  box-shadow:var(--shadow-md);animation:ds-slide-up var(--duration-base) var(--ease);
}
.toast.error{border-left-color:var(--danger);}

/* ------------------------------------------------------------
   18. EMPTY STATES (padrão compartilhado)
   ------------------------------------------------------------ */
.empty-state{
  text-align:center;color:var(--dim);font-size:14.5px;padding:60px 20px;
  background:var(--card);border:1px dashed var(--card-border);border-radius:var(--radius-md);line-height:1.7;
}