/**
 * Design tokens — layout Apple-like
 * Só entra em efeito sob body.layout-apple via layout-apple.css
 *
 * Redesign 2026-08 (ver md/redesign-apple-excelencia-plano.md e
 * md/redesign-apple-checklist-implementacao.md, Entregável 0): paleta em rampa
 * completa, tipografia nativa do sistema, dark mode. Os nomes de token já
 * consumidos pelas telas ainda não migradas (Fases 2-6 do trabalho anterior)
 * continuam funcionando via os aliases de compatibilidade no fim do arquivo —
 * só remover essa seção depois que o Entregável 10 confirmar que nada mais
 * depende deles.
 */

body.layout-apple {
  /* Tipografia — stack nativa do sistema (sem CDN externo) */
  --la-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", "Inter", system-ui, sans-serif;
  --la-font-mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Superfícies (light, estilo Apple HIG) */
  --la-bg: #f5f5f7;
  --la-bg-elevated: #ffffff;
  --la-bg-elevated-2: #ffffff;
  --la-bg-overlay: rgba(255, 255, 255, 0.78);
  --la-bg-hover: rgba(0, 0, 0, 0.04);
  --la-bg-active: rgba(97, 58, 181, 0.1);
  --la-bg-pressed: rgba(97, 58, 181, 0.16);

  /*
   * Texto — tons secundário/terciário ajustados para WCAG AA (>=4.5:1)
   * tanto sobre card branco quanto sobre o content #f5f5f7.
   */
  --la-text: #1d1d1f;
  --la-text-secondary: #5f5f66; /* 6.33:1 no branco · 5.82:1 no #f5f5f7 */
  --la-text-tertiary: #6f6f76;  /* 4.99:1 no branco · 4.58:1 no #f5f5f7 */
  --la-text-disabled: #b8b8bd;
  --la-text-on-accent: #ffffff;

  /* Marca CredVibes — roxo oficial (--credvibes / bg-credvibes), agora em rampa completa */
  --la-accent: #613ab5;
  --la-accent-hover: #4d2c93;
  --la-accent-pressed: #3c2273;
  --la-accent-soft: rgba(97, 58, 181, 0.12);
  --la-accent-soft-hover: rgba(97, 58, 181, 0.18);
  --la-accent-border: rgba(97, 58, 181, 0.28);

  /*
   * Semânticas — três variantes por cor:
   *  - tom claro (borda/ícone/barra de KPI — contexto não textual, exige só 3:1)
   *  - "-fill"  (texto branco por cima — badges/alerts sólidos, exige 4.5:1)
   *  - "-soft"  (fundo sutil — chip/pill)
   */
  --la-success: #1cc88a;
  --la-success-fill: #0f7a52; /* branco por cima: 5.35:1 */
  --la-success-soft: rgba(28, 200, 138, 0.12);
  --la-info: #0891b2;
  --la-info-fill: #0e7490; /* branco por cima: 5.36:1 */
  --la-info-soft: rgba(8, 145, 178, 0.12);
  --la-warning: #d97706;
  --la-warning-fill: #b45309; /* branco por cima: 5.02:1 */
  --la-warning-soft: rgba(217, 119, 6, 0.12);
  --la-danger: #dc2626;
  --la-danger-fill: #b91c1c; /* branco por cima: 5.9:1 */
  --la-danger-soft: rgba(220, 38, 38, 0.12);

  /*
   * Bordas — reforçadas em 2026-08-10 (feedback visual em navegador real: a
   * v1 era sutil demais e cards/headers não se distinguiam do fundo em tela;
   * 2º reforço no mesmo dia, pedido explícito após o 1º ainda ficar discreto).
   */
  --la-border: rgba(0, 0, 0, 0.14);
  --la-border-strong: rgba(0, 0, 0, 0.22);
  --la-hairline: rgba(0, 0, 0, 0.16);

  /* Elevação — sombra em camadas por contexto, reforçada junto com as bordas */
  --la-shadow-card: 0 3px 10px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  --la-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1);
  --la-shadow-modal: 0 28px 64px rgba(0, 0, 0, 0.26), 0 4px 12px rgba(0, 0, 0, 0.14);
  --la-blur-material: saturate(180%) blur(20px);

  /* Raio por tamanho de componente */
  --la-radius-control: 8px;
  --la-radius-card: 12px;
  --la-radius-sheet: 18px;

  /* Espaçamento — grade 4pt */
  --la-space-1: 4px;
  --la-space-2: 8px;
  --la-space-3: 12px;
  --la-space-4: 16px;
  --la-space-5: 24px;
  --la-space-6: 32px;
  --la-space-7: 48px;
  --la-space-8: 64px;

  /* Motion — respeita prefers-reduced-motion nas regras de componente */
  --la-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --la-duration-fast: 120ms;
  --la-duration: 200ms;

  /* Sidebar */
  --la-sidebar-width: 15.5rem;
  --la-sidebar-text: var(--la-text);
  --la-sidebar-pad-x: 0.85rem;

  /* Topbar */
  --la-topbar-height: 3.25rem;

  /* Componentes */
  --la-control-height: 2.35rem;
  --la-focus-ring: 0 0 0 3px var(--la-accent-soft-hover);
  --la-focus-outline: 2px solid var(--la-accent);
  --la-focus-outline-offset: 2px;

  /* ---------------------------------------------------------------------
   * Aliases de compatibilidade — nomes antigos ainda referenciados pelas
   * telas não migradas neste redesign. Remover só no Entregável 10, depois
   * de confirmar (grep) que nada mais os usa.
   * --------------------------------------------------------------------- */
  --la-bg-sidebar: var(--la-bg-elevated);
  --la-bg-header: var(--la-bg-overlay);
  --la-accent-muted: var(--la-accent-soft-hover);
  --la-shadow-sm: var(--la-shadow-card);
  --la-shadow-md: var(--la-shadow-popover);
  --la-shadow-lg: var(--la-shadow-modal);
  --la-radius-sm: var(--la-radius-control);
  --la-radius-md: var(--la-radius-card);
  --la-radius-lg: var(--la-radius-sheet);
  --la-fill-success: var(--la-success-fill);
  --la-fill-info: var(--la-info-fill);
  --la-fill-warning: var(--la-warning-fill);
  --la-fill-danger: var(--la-danger-fill);
  --la-fill-neutral: var(--la-text-tertiary);
  --la-success-text: var(--la-success-fill);
}

/*
 * Dark mode — por padrão segue a preferência do sistema operacional, mas
 * pode ser forçado manualmente via [data-la-theme="dark"|"light"] no
 * body (botão de tema na topbar, ver templates/topbar.php + adm.php,
 * persistido em localStorage "la-theme"). :not([data-la-theme="light"])
 * garante que a escolha manual "claro" vence mesmo se o SO estiver em
 * modo escuro. Os valores do bloco manual [data-la-theme="dark"] abaixo
 * são intencionalmente os MESMOS do media query — mesma técnica usada no
 * protótipo (Claude Artifact a044058e), ctrl+f "data-theme" lá pra
 * comparar.
 * A cobertura visual completa de todas as telas é validada no Entregável 9
 * do checklist de implementação; até lá, telas ainda não migradas para os
 * componentes novos podem apresentar pequenas inconsistências em modo escuro.
 */
@media (prefers-color-scheme: dark) {
  body.layout-apple:not([data-la-theme="light"]) {
    --la-bg: #1c1c1e;
    --la-bg-elevated: #2c2c2e;
    --la-bg-elevated-2: #3a3a3c;
    --la-bg-overlay: rgba(28, 28, 30, 0.78);
    --la-bg-hover: rgba(255, 255, 255, 0.06);
    --la-bg-active: rgba(138, 111, 214, 0.16);
    --la-bg-pressed: rgba(138, 111, 214, 0.24);

    --la-text: #f5f5f7;
    --la-text-secondary: #a1a1a6;
    --la-text-tertiary: #8e8e93;
    --la-text-disabled: #636366;
    --la-text-on-accent: #ffffff;

    --la-accent: #8a6fd6;
    --la-accent-hover: #a68ce0;
    --la-accent-pressed: #7257bd;
    --la-accent-soft: rgba(138, 111, 214, 0.18);
    --la-accent-soft-hover: rgba(138, 111, 214, 0.27);
    --la-accent-border: rgba(138, 111, 214, 0.4);

    --la-success: #30d491;
    --la-success-fill: #26b67d;
    --la-success-soft: rgba(48, 212, 145, 0.16);
    --la-info: #3fc4e0;
    --la-info-fill: #22adc9;
    --la-info-soft: rgba(63, 196, 224, 0.16);
    --la-warning: #f0a828;
    --la-warning-fill: #d9930f;
    --la-warning-soft: rgba(240, 168, 40, 0.16);
    --la-danger: #ff6b6b;
    --la-danger-fill: #f24c4c;
    --la-danger-soft: rgba(255, 107, 107, 0.16);

    --la-border: rgba(255, 255, 255, 0.2);
    --la-border-strong: rgba(255, 255, 255, 0.28);
    --la-hairline: rgba(255, 255, 255, 0.22);

    --la-shadow-card: 0 3px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --la-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.35);
    --la-shadow-modal: 0 28px 64px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

body.layout-apple[data-la-theme="dark"] {
  --la-bg: #1c1c1e;
  --la-bg-elevated: #2c2c2e;
  --la-bg-elevated-2: #3a3a3c;
  --la-bg-overlay: rgba(28, 28, 30, 0.78);
  --la-bg-hover: rgba(255, 255, 255, 0.06);
  --la-bg-active: rgba(138, 111, 214, 0.16);
  --la-bg-pressed: rgba(138, 111, 214, 0.24);

  --la-text: #f5f5f7;
  --la-text-secondary: #a1a1a6;
  --la-text-tertiary: #8e8e93;
  --la-text-disabled: #636366;
  --la-text-on-accent: #ffffff;

  --la-accent: #8a6fd6;
  --la-accent-hover: #a68ce0;
  --la-accent-pressed: #7257bd;
  --la-accent-soft: rgba(138, 111, 214, 0.18);
  --la-accent-soft-hover: rgba(138, 111, 214, 0.27);
  --la-accent-border: rgba(138, 111, 214, 0.4);

  --la-success: #30d491;
  --la-success-fill: #26b67d;
  --la-success-soft: rgba(48, 212, 145, 0.16);
  --la-info: #3fc4e0;
  --la-info-fill: #22adc9;
  --la-info-soft: rgba(63, 196, 224, 0.16);
  --la-warning: #f0a828;
  --la-warning-fill: #d9930f;
  --la-warning-soft: rgba(240, 168, 40, 0.16);
  --la-danger: #ff6b6b;
  --la-danger-fill: #f24c4c;
  --la-danger-soft: rgba(255, 107, 107, 0.16);

  --la-border: rgba(255, 255, 255, 0.2);
  --la-border-strong: rgba(255, 255, 255, 0.28);
  --la-hairline: rgba(255, 255, 255, 0.22);

  --la-shadow-card: 0 3px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --la-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.35);
  --la-shadow-modal: 0 28px 64px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
}