/* ==========================================================================
   TOKENS DE DESIGN — SINAV
   Todas as cores, tamanhos e espaçamentos do sistema ficam aqui.
   Nunca use valores hardcoded nos outros arquivos CSS.
   ========================================================================== */

:root {
  /* ─────────────────────────────────────────
     CORES PRINCIPAIS
  ───────────────────────────────────────── */

  --color-primary: #00d1b2;
  --color-primary-dark: #00a98f;
  --color-danger: #f14668;
  --color-warning: #ffe08a;
  --color-warning-dark: #f5a623;
  --color-success: #48c78e;
  --color-info: #3e8ed0;
  --color-link: #485fc7;

  /* ─────────────────────────────────────────
     CORES DE STATUS DAS NOTIFICAÇÕES
  ───────────────────────────────────────── */

  --status-1-color: #ff8c00; /* Pendente     — laranja */
  --status-2-color: #3e8ed0; /* Encaminhada  — azul */
  --status-3-color: #2ecc71; /* Em atend.    — verde   */
  --status-4-color: #e74c3c; /* Encerrada    — vermelho */

  /* ─────────────────────────────────────────
     CORES DE INTERFACE
  ───────────────────────────────────────── */

  --bg-body: #f5f7fa;
  --bg-card: #ffffff;
  --bg-hover: #f0f4ff;
  --border-color: #edf2f7;
  --border-color-hover: #485fc7;
  --text-primary: #363636;
  --text-secondary: #7a7a7a;
  --text-muted: #b5b5b5;

  /* ─────────────────────────────────────────
     SIDEBAR
  ───────────────────────────────────────── */

  --sb-collapsed: 65px;
  --sb-expanded: 300px;
  --sb-bg: #1a202c;
  --sb-hover: rgba(255, 255, 255, 0.08);
  --sb-text: #cbd5e0;
  --sb-text-active: #ffffff;

  /* ─────────────────────────────────────────
     TIPOGRAFIA
  ───────────────────────────────────────── */

  --font-family-base:
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;

  /* ─────────────────────────────────────────
     ESPAÇAMENTOS
  ───────────────────────────────────────── */

  --spacing-xs: 0.25rem; /*  4px */
  --spacing-sm: 0.5rem; /*  8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */

  /* ─────────────────────────────────────────
     BORDAS
  ───────────────────────────────────────── */

  --border-radius: 12px;
  --border-radius-sm: 6px;
  --border-radius-pill: 1000px;

  /* ─────────────────────────────────────────
     SOMBRAS
  ───────────────────────────────────────── */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* ─────────────────────────────────────────
     TRANSIÇÕES
  ───────────────────────────────────────── */

  --transition-speed: 0.3s;
  --transition-func: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: var(--transition-speed) var(--transition-func);

  /* ─────────────────────────────────────────
     COMPONENTES
  ───────────────────────────────────────── */

  --card-min-height: 80px;
  --topbar-height: 56px; /* altura da topbar mobile */

  /* ─────────────────────────────────────────
     BREAKPOINTS — referência (não usados em CSS, apenas documentação)
     Mobile:     até 768px
     Tablet:     769px – 1023px
     Desktop:    1024px – 1215px
     Widescreen: acima de 1216px
     (Mesmos breakpoints do Bulma)
  ───────────────────────────────────────── */
}

/* ─────────────────────────────────────────
   RESET E BASE
───────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: var(--bg-body);
  font-family: var(--font-family-base) !important;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

input,
textarea,
select,
button {
  font-family: inherit !important;
}