/*
 * AgendAgora - tokens de design (spec identidade visual, secoes 3 a 5).
 * Valores de cor em hex simples (o teste de contraste le este arquivo).
 * Claro: :root e [data-theme="light"]. Escuro: [data-theme="dark"] e, sem
 * data-theme, @media (prefers-color-scheme: dark) em :root:not([data-theme]).
 *
 * Valores derivados (tests/Support/Contrast.php):
 *  - --surface-2, --border, --primary-hover: OKLCH da spec convertido em hex.
 *  - --st-x-bg: 12% da cor do estado sobre --surface, hex opaco.
 *  - Ajustes de luminosidade (passos de 0,01 em L) onde a spec nao fecha:
 *    claro --st-agendado #5253f9 -> #504ff6 (L 0,54; sobre o fundo suave
 *    4,46 -> 4,67:1); escuro --st-agendado #7f8fff -> #8a9cff (L 0,73; sobre
 *    a superficie 6,16 -> 7,02:1, exigido >= 7). --primary segue #5253f9/#7f8fff.
 *  - --st-encerrado (rejeitado/expirado) reaproveita a cor de --st-faltou.
 * O coral (--accent) nunca e cor de texto sobre fundo claro.
 */

/* Nao dependem do tema */
:root {
  --st-agendado-icon: clock;
  --st-confirmado-icon: check;
  --st-pendente-icon: hourglass;
  --st-concluido-icon: check-double;
  --st-cancelado-icon: x;
  --st-faltou-icon: alert;
  --st-encerrado-icon: dash;

  --fs-1: 0.75rem;
  --fs-2: 0.875rem;
  --fs-3: 1rem;
  --fs-4: 1.125rem;
  --fs-5: 1.25rem;
  --fs-6: 1.5rem;
  --fs-7: 2rem;
  --fs-8: 2.5rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r-control: 8px;
  --r-card: 12px;
  --r-panel: 20px;
  --r-pill: 999px;

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Painel ilustrado das telas de entrar (css/auth-split.css): sempre indigo escuro, nos dois temas.
     --hero-highlight (coral) so em texto grande (>= 24 px) sobre o degrade: minimo 3:1. */
  --hero-bg-top: #3a30c4;
  --hero-bg-mid: #2a2494;
  --hero-bg: #14123f;
  --hero-text: #ffffff;
  --hero-text-soft: #d4d6fb;
  --hero-highlight: #ff8a5e;
  --hero-pill: #241f86;
  --hero-line: #4c46b8;
}

/* Claro (padrao) */
:root,
[data-theme="light"] {
  --bg: #f9fafe;
  --surface: #ffffff;
  --surface-2: #f1f3fa;
  --border: #dee1ec;
  --text: #15192d;
  --text-muted: #585d6f;
  --primary: #5253f9;
  --primary-hover: #4741e7;
  --on-primary: #ffffff;
  --accent: #fb794a;
  --on-accent: #12122a;
  --focus-ring: var(--primary);

  --st-agendado: #504ff6;
  --st-agendado-bg: #eaeafe;
  --st-confirmado: #00792f;
  --st-confirmado-bg: #e0efe6;
  --st-pendente: #8e5400;
  --st-pendente-bg: #f1eae0;
  --st-concluido: #00767e;
  --st-concluido-bg: #e0eff0;
  --st-cancelado: #c21725;
  --st-cancelado-bg: #f8e3e5;
  --st-faltou: #5e6275;
  --st-faltou-bg: #ececee;
  --st-encerrado: #5e6275;
  --st-encerrado-bg: #ececee;

  --shadow-1: 0 1px 2px rgba(21, 25, 45, 0.08), 0 1px 1px rgba(21, 25, 45, 0.04);
  --shadow-2: 0 4px 12px rgba(21, 25, 45, 0.12), 0 1px 3px rgba(21, 25, 45, 0.06);
}

/* Escuro escolhido explicitamente */
[data-theme="dark"] {
  --bg: #0a0c18;
  --surface: #141726;
  --surface-2: #1d2130;
  --border: #292d3d;
  --text: #f0f1f9;
  --text-muted: #9fa4b8;
  --primary: #7f8fff;
  --primary-hover: #93a5ff;
  --on-primary: #12122a;
  --accent: #ff8a5e;
  --on-accent: #12122a;
  --focus-ring: var(--primary);

  --st-agendado: #8a9cff;
  --st-agendado-bg: #222740;
  --st-confirmado: #56d57b;
  --st-confirmado-bg: #1c2e30;
  --st-pendente: #f3b94c;
  --st-pendente-bg: #2f2a2b;
  --st-concluido: #3aced6;
  --st-concluido-bg: #192d3b;
  --st-cancelado: #ff7a73;
  --st-cancelado-bg: #30232f;
  --st-faltou: #a5aabe;
  --st-faltou-bg: #252938;
  --st-encerrado: #a5aabe;
  --st-encerrado-bg: #252938;

  --shadow-1: 0 0 0 1px #292d3d;
  --shadow-2: 0 0 0 1px #292d3d;
}

/* Sem escolha explicita: segue o sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a0c18;
    --surface: #141726;
    --surface-2: #1d2130;
    --border: #292d3d;
    --text: #f0f1f9;
    --text-muted: #9fa4b8;
    --primary: #7f8fff;
    --primary-hover: #93a5ff;
    --on-primary: #12122a;
    --accent: #ff8a5e;
    --on-accent: #12122a;
    --focus-ring: var(--primary);

    --st-agendado: #8a9cff;
    --st-agendado-bg: #222740;
    --st-confirmado: #56d57b;
    --st-confirmado-bg: #1c2e30;
    --st-pendente: #f3b94c;
    --st-pendente-bg: #2f2a2b;
    --st-concluido: #3aced6;
    --st-concluido-bg: #192d3b;
    --st-cancelado: #ff7a73;
    --st-cancelado-bg: #30232f;
    --st-faltou: #a5aabe;
    --st-faltou-bg: #252938;
    --st-encerrado: #a5aabe;
    --st-encerrado-bg: #252938;

    --shadow-1: 0 0 0 1px #292d3d;
    --shadow-2: 0 0 0 1px #292d3d;
  }
}

/*
 * Troca de tema: onda circular, igual ao whatsapp-crm (index.css, "Theme Transition").
 * O clip-path vem do theme.js (animate). Sem fade: a troca sem onda e direta.
 * A camada de cima e a que anima: no escuro, a nova (cresce); no claro, a antiga (encolhe).
 */
html { view-transition-name: root; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; display: block; }
::view-transition-image-pair(root) { isolation: isolate; }
[data-theme="dark"]::view-transition-old(root) { z-index: 1; }
[data-theme="dark"]::view-transition-new(root) { z-index: 9999; }
[data-theme="light"]::view-transition-old(root) { z-index: 9999; }
[data-theme="light"]::view-transition-new(root) { z-index: 1; }