/* ============================================================
   Origou — UI Theme (TOKENS ONLY) — v6.0
   - Nenhum componente aqui. Apenas variáveis e regras universais.
   - Temas ativos: light (default) e dark.
   - Paleta oficial:
     • Ponto Azul: #010064
     • Azul Médico: #023AFF
     • Cinza Clínico: #EBF3FF
     • Amarelo S.O.S.: #FCE106
     • Laranja Sinapse: #F23D1A
   ============================================================ */

/* ===============================
   Fonte oficial — Geist
   Diretório esperado no projeto:
   /assets/fonts/geist/Geist-VariableFont_wght.ttf
   =============================== */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   Base tokens (comuns)
   =============================== */
:root {
  color-scheme: light;

  /* Tipografia e ritmo */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 16px;

  /* Motion */
  --transition-fast: 0.16s ease;
  --transition-theme:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.16s ease,
    opacity 0.16s ease;

  /* Foco / acessibilidade */
  --focus-width: 3px;

  /* Marca — tokens extras para telas futuras */
  --origou-blue-point: #010064;
  --origou-blue-medical: #023AFF;
  --origou-clinical-gray: #EBF3FF;
  --origou-yellow-sos: #FCE106;
  --origou-orange-synapse: #F23D1A;

  /* Estados semânticos */
  --color-danger: #F23D1A;
  --color-success: #023AFF;
  --color-warning: #FCE106;
  --color-info: #023AFF;

  /* Seleção */
  --selection-bg: rgba(2, 58, 255, 0.20);
  --selection-text: inherit;

  /* Ícones legados via <img> (fallback) */
  --icon-filter: none;
  --icon-opacity-img: 0.92;

  /* Refinos universais */
  --color-focus: rgba(2, 58, 255, 0.38);
}

/* ============================================================
   LIGHT THEME (default) — Origou principal
   data-theme pode ser "light" ou vazio
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Superfícies */
  --color-bg: #EBF3FF;          /* Cinza Clínico — fundo principal */
  --color-surface: #FFFFFF;     /* Cards e blocos de conteúdo */
  --color-surface-2: #F5F9FF;   /* Inputs, blocos internos e áreas secundárias */
  --color-elevated: #FFFFFF;    /* Modais, dropdowns e camadas elevadas */

  /* Bordas */
  --color-border: rgba(1, 0, 100, 0.16);
  --color-border-soft: rgba(1, 0, 100, 0.10);

  /* Texto */
  --color-text: #010064;                      /* Ponto Azul substitui o preto */
  --color-text-secondary: rgba(1, 0, 100, 0.82);
  --color-muted: rgba(1, 0, 100, 0.62);
  --color-placeholder: rgba(1, 0, 100, 0.48);

  /* Marca */
  --color-primary: #023AFF;       /* Azul Médico — ações e elementos principais */
  --color-secondary: #010064;     /* Ponto Azul — profundidade e gradientes sérios */
  --color-accent: #FCE106;        /* Amarelo S.O.S. — destaque pontual */
  --color-accent-strong: #F23D1A; /* Laranja Sinapse — alerta/chamada máxima */

  /* Interações */
  --color-hover: rgba(2, 58, 255, 0.08);
  --color-active: rgba(2, 58, 255, 0.14);
  --color-focus: rgba(2, 58, 255, 0.36);

  /* Links */
  --color-link: #023AFF;
  --color-link-hover: #010064;

  /* Inputs */
  --input-bg: #FFFFFF;
  --input-border: rgba(1, 0, 100, 0.18);

  /* Chips */
  --chip-bg: rgba(2, 58, 255, 0.07);
  --chip-border: rgba(2, 58, 255, 0.18);

  /* Ícones */
  --color-icon: var(--color-text);

  /* LEGADO <img>: light não precisa filtro */
  --icon-filter: none;

  /* Sombras */
  --shadow-1: 0 10px 28px rgba(1, 0, 100, 0.08);
  --shadow-2: 0 18px 46px rgba(1, 0, 100, 0.14);

  /* Header/sidebar */
  --shadow-sidebar: 4px 0 14px rgba(1, 0, 100, 0.10);

  /* Seleção */
  --selection-bg: rgba(2, 58, 255, 0.18);
}

/* ============================================================
   DARK THEME — Origou secundário
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #010064;
  --color-surface: #080872;
  --color-surface-2: #0D118A;
  --color-elevated: #080872;

  --color-border: rgba(235, 243, 255, 0.18);
  --color-border-soft: rgba(235, 243, 255, 0.11);

  --color-text: #EBF3FF;
  --color-text-secondary: rgba(235, 243, 255, 0.88);
  --color-muted: rgba(235, 243, 255, 0.68);
  --color-placeholder: rgba(235, 243, 255, 0.52);

  --color-primary: #FCE106;       /* Em dark, o amarelo garante contraste para ações */
  --color-secondary: #023AFF;     /* Azul Médico permanece como apoio de marca */
  --color-accent: #FCE106;
  --color-accent-strong: #F23D1A;

  --color-hover: rgba(235, 243, 255, 0.10);
  --color-active: rgba(252, 225, 6, 0.18);
  --color-focus: rgba(252, 225, 6, 0.42);

  --color-link: #FCE106;
  --color-link-hover: #EBF3FF;

  --input-bg: #0D118A;
  --input-border: rgba(235, 243, 255, 0.22);

  --chip-bg: rgba(235, 243, 255, 0.08);
  --chip-border: rgba(235, 243, 255, 0.14);

  /* Ícones */
  --color-icon: var(--color-text);

  /* LEGADO <img>: clareia sem estourar */
  --icon-filter: invert(1) saturate(0) brightness(1.05);

  --shadow-1: 0 18px 45px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 24px 64px rgba(0, 0, 0, 0.52);
  --shadow-sidebar: 4px 0 16px rgba(0, 0, 0, 0.48);

  --selection-bg: rgba(252, 225, 6, 0.24);
}

/* ===============================
   Regras universais mínimas
   =============================== */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  transition: var(--transition-theme);
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

button,
.btn,
.app-nav a,
.menu-item,
label,
.tag,
.chip,
.pill {
  font-weight: var(--font-weight-semibold);
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* Foco consistente */
:where(button, a, input, select, textarea, [tabindex]):focus {
  outline: none;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: 0 0 0 var(--focus-width) var(--color-focus);
}

/* Preferência de redução de movimento */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}