/* ─────────────────────────────────────────────────────────────────
 * Pratika — Design tokens
 * Identidade: Salvador / Bahia, nicho de beleza (manicure, sobrancelha, barbearia).
 * Filosofia: cores vibrantes mas refinadas, mobile-first, calor humano.
 * Inspirações: fitinha do Bonfim, azulejaria do Pelourinho, esmaltaria moderna.
 * ───────────────────────────────────────────────────────────────── */

:root {
  /* Diz ao browser que o app suporta light + dark.
     Isso afeta como native UI (form controls, scrollbars, dropdowns
     do <select>) é renderizada — sem isso o dropdown puxa default
     light com texto branco, ficando ilegível. */
  color-scheme: light dark;

  /* ── Paleta primária ────────────────────────────────────────────
   * --p-axe:    roxo-violeta. Sofisticado, místico, beleza.
   * --p-amber:  amarelo-pelourinho. CTA secundário, destaque.
   * --p-coral:  vermelho-acerola. Cobrança, ação financeira.
   * --p-bonfim: azul-Bonfim. Confiança, agendado/confirmado.
   * --p-verde:  verde-esmeralda. Sucesso, novo cliente.
   */
  --p-axe-50:   #faf5ff;
  --p-axe-100:  #f0e3ff;
  --p-axe-200:  #dec4fc;
  --p-axe-300:  #c69af2;
  --p-axe-400:  #aa6ee8;
  --p-axe-500:  #8e47d8;   /* primária */
  --p-axe-600:  #7732bd;
  --p-axe-700:  #5f269a;
  --p-axe-800:  #4a1d78;
  --p-axe-900:  #2d1147;

  --p-amber-400:#fbbf24;
  --p-amber-500:#f5a524;
  --p-amber-600:#d68910;

  --p-coral-400:#ff8a8a;
  --p-coral-500:#ff6b6b;
  --p-coral-600:#e54848;

  --p-bonfim-400:#3aa3f0;
  --p-bonfim-500:#1e88e5;
  --p-bonfim-600:#1565c0;

  --p-verde-400:#34c759;
  --p-verde-500:#2e9d4a;
  --p-verde-600:#1f7a37;

  /* ── Neutros (quentes, não cinza-frio) ─────────────────────────── */
  --n-0:    #ffffff;
  --n-50:   #fffbf5;   /* creme — fundo padrão */
  --n-100:  #fbf2e4;
  --n-200:  #f0e2cc;
  --n-300:  #d8c5a4;
  --n-400:  #a8957e;
  --n-500:  #75695a;
  --n-600:  #4a4239;
  --n-700:  #2d271f;
  --n-800:  #1a1612;
  --n-900:  #0e0b08;

  /* ── Tokens semânticos ────────────────────────────────────────── */
  --bg:           var(--n-50);
  --surface:      var(--n-0);
  --surface-2:    var(--n-100);
  --ink:          var(--n-700);
  --ink-soft:     var(--n-500);
  --ink-faint:    var(--n-400);
  --border:       rgba(45,17,71,.08);
  --border-strong:rgba(45,17,71,.18);
  --primary:      var(--p-axe-500);
  --primary-ink:  var(--n-0);
  --primary-soft: var(--p-axe-100);
  --primary-soft-fg: var(--p-axe-700);   /* texto sobre primary-soft (light: roxo escuro) */

  /* Tints "soft" com fg adaptativo pra cada acento.
     Use sempre como par: background var(--X-soft) + color var(--X-soft-fg). */
  --amber-soft:    rgba(245,165,36,.18);
  --amber-soft-fg: var(--p-amber-600);
  --coral-soft:    rgba(255,107,107,.14);
  --coral-soft-fg: var(--p-coral-600);
  --bonfim-soft:    rgba(30,136,229,.14);
  --bonfim-soft-fg: var(--p-bonfim-600);
  --verde-soft:    rgba(46,157,74,.16);
  --verde-soft-fg: var(--p-verde-600);
  --accent:       var(--p-amber-500);
  --money:        var(--p-coral-500);
  --info:         var(--p-bonfim-500);
  --success:      var(--p-verde-500);
  --warn:         var(--p-amber-500);
  --danger:       var(--p-coral-600);

  /* Status badges (intent / appointment status) */
  --status-pending-bg:    #fff1d7;
  --status-pending-fg:    #8a4d00;
  --status-confirmed-bg:  #dff5e2;
  --status-confirmed-fg:  #1f7a37;
  --status-cancelled-bg:  #fbe1e1;
  --status-cancelled-fg:  #b13030;
  --status-noshow-bg:     #ece9e3;
  --status-noshow-fg:     #5c5448;

  /* Tipografia */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Caveat", "Marker Felt", cursive;

  /* Espaços (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10:40px; --s-12:48px;  --s-16:64px;

  /* Raios */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 18px;
  --r-4: 24px;
  --r-pill: 999px;

  /* Sombras (calientes, não cinza puro) */
  --shadow-1: 0 1px 2px rgba(45,17,71,.06), 0 1px 1px rgba(45,17,71,.04);
  --shadow-2: 0 4px 12px rgba(45,17,71,.08), 0 2px 4px rgba(45,17,71,.04);
  --shadow-3: 0 12px 28px rgba(45,17,71,.14), 0 6px 12px rgba(45,17,71,.06);
  --shadow-pop:0 18px 38px rgba(142,71,216,.22), 0 6px 12px rgba(142,71,216,.10);

  /* Velocidades */
  --t-fast: .12s;
  --t-base: .22s;
  --t-slow: .42s;
  --ease:   cubic-bezier(.2,.8,.2,1);

  /* Fitinha do Bonfim — gradiente assinatura (sutil, não kitsch) */
  --fitinha: linear-gradient(90deg,
    var(--p-axe-500) 0%, var(--p-axe-500) 22%,
    var(--p-bonfim-500) 22%, var(--p-bonfim-500) 44%,
    var(--p-amber-500) 44%, var(--p-amber-500) 66%,
    var(--p-coral-500) 66%, var(--p-coral-500) 88%,
    var(--p-verde-500) 88%, var(--p-verde-500) 100%);

  /* Glow do CTA */
  --glow-axe: 0 0 0 4px rgba(142,71,216,.18);
  --glow-coral: 0 0 0 4px rgba(255,107,107,.22);
}

/* ── Dark mode (auto, opcional via prefers-color-scheme) ─────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14101a;
    --surface:   #1c1626;
    --surface-2: #251c33;
    --ink:       #f3ecff;
    --ink-soft:  #c9bfdc;
    --ink-faint: #8d83a3;
    --border:        rgba(255,255,255,.08);
    --border-strong: rgba(255,255,255,.16);
    --primary-soft: rgba(142,71,216,.18);
    --primary-soft-fg: #d8b8f5;   /* texto sobre primary-soft (dark: lilás claro) */

    /* Em dark mode, todos os "soft fg" precisam ser CLAROS pra contrastar */
    --amber-soft-fg:  #fbbf24;
    --coral-soft-fg:  #ff9a9a;
    --bonfim-soft-fg: #7cc4f7;
    --verde-soft-fg:  #8eecaa;

    --status-pending-bg:   rgba(245,165,36,.18);
    --status-pending-fg:   #ffd58a;
    --status-confirmed-bg: rgba(52,199,89,.18);
    --status-confirmed-fg: #8eecaa;
    --status-cancelled-bg: rgba(255,107,107,.18);
    --status-cancelled-fg: #ff9a9a;
    --status-noshow-bg:    rgba(150,150,150,.16);
    --status-noshow-fg:    #c9c2bb;

    --shadow-1:  0 1px 2px rgba(0,0,0,.5);
    --shadow-2:  0 4px 14px rgba(0,0,0,.5);
    --shadow-3:  0 14px 30px rgba(0,0,0,.55);
  }
}

/* ── Reset leve ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Native <select> dropdowns: forçar contraste explícito.
   Sem isso, o popup nativo herda o color: var(--ink) (claro no dark mode)
   mas mantém background branco do sistema → texto claro em fundo claro. */
select {
  background-color: var(--surface);
  color: var(--ink);
}
select option,
select optgroup {
  background-color: var(--surface);
  color: var(--ink);
  padding: 8px 10px;
}
select option:checked,
select option:hover {
  background-color: var(--primary-soft);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  /* Em dark mode alguns navegadores ignoram option { background } e usam preto puro.
     Forçamos um cinza-roxo escuro com texto claríssimo. */
  select option,
  select optgroup {
    background-color: #251c33;
    color: #f3ecff;
  }
  select option:checked,
  select option:hover {
    background-color: rgba(142,71,216,.32);
    color: #ffffff;
  }
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }

/* ── Faixa fitinha (decoração reutilizável) ─────────────────────── */
.fitinha {
  height: 4px;
  background: var(--fitinha);
  border-radius: 2px;
}
.fitinha-top {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: 4px;
  background: var(--fitinha);
}

/* ── Componentes base ───────────────────────────────────────────── */
.btn {
  appearance: none; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-2);
  font-weight: 600; font-size: 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--primary); color: var(--primary-ink); border-color: transparent;
  box-shadow: var(--shadow-pop);
}
.btn--primary:hover { box-shadow: 0 22px 44px rgba(142,71,216,.3); }
.btn--ghost { background: transparent; border-color: var(--border-strong); }
.btn--success { background: var(--success); color: #fff; border-color: transparent; }
.btn--danger  { background: var(--danger); color: #fff; border-color: transparent; }
.btn--money   { background: var(--money); color: #fff; border-color: transparent;
                box-shadow: var(--glow-coral); }
.btn--lg { padding: 16px 26px; font-size: 16px; border-radius: var(--r-3); }
.btn--block { width: 100%; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.badge--pending   { background: var(--status-pending-bg);   color: var(--status-pending-fg); }
.badge--confirmed { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); }
.badge--cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
.badge--noshow    { background: var(--status-noshow-bg);    color: var(--status-noshow-fg); }

.kbd { font-family: ui-monospace, monospace; background: var(--surface-2);
       border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* Acessibilidade: foco visível para teclado, sem ofuscar mouse */
:focus-visible { outline: 3px solid var(--p-axe-300); outline-offset: 2px; border-radius: 4px; }
button:focus, a:focus { outline: none; }

/* Animações utilitárias */
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(142,71,216,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(142,71,216,0); }
  100%{ box-shadow: 0 0 0 0 rgba(142,71,216,0); }
}
.fade-in { animation: fade-up var(--t-slow) var(--ease) both; }