/* ============================================================
   UPDOWN NOC — Design tokens
   Identidade: azul UPDOWN (#0b74ff) → ciano (#1dc9ff) sobre navy.
   Tema escuro é o padrão (sala de NOC). Tema claro é suportado
   integralmente: só os tokens mudam, nenhum componente é redesenhado.
   ============================================================ */

:root {
  /* Marca ------------------------------------------------- */
  --brand-500: #0b74ff;
  --brand-400: #2f8bff;
  --brand-600: #0a5ed6;
  --cyan-400: #1dc9ff;
  --cyan-300: #6adfff;
  --purple-400: #a56bff;

  --grad-brand: linear-gradient(135deg, #0b74ff 0%, #1dc9ff 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(11, 116, 255, .16), rgba(29, 201, 255, .10));

  /* Semânticos de estado ---------------------------------- */
  --ok-500: #2fd6a0;
  --warn-500: #ffb020;
  --danger-500: #ff5f74;
  --info-500: #1dc9ff;

  /* Tipografia -------------------------------------------- */
  --font-sans: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --fs-10: .625rem;   /* 10px — micro rótulos */
  --fs-11: .6875rem;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;   /* corpo */
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;

  --lh-tight: 1.15;
  --lh-base: 1.55;
  --tracking-caps: .12em;

  /* Espaçamento — grade de 4px ---------------------------- */
  --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;

  /* Raio --------------------------------------------------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* Movimento --------------------------------------------- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Layout ------------------------------------------------- */
  --appbar-h: 64px;
  /* Altura da barra de navegação do celular. Vale 0 no desktop, onde ela não
     existe, e passa a valer no celular (regra em components.css). Toda tela de
     altura cheia desconta este valor: sem ele, o rodapé da tela — controles de
     zoom do mapa, botões de ação — fica atrás da barra fixa. */
  --mobile-nav-h: 0px;
  --sidebar-w: 288px;
  --sidebar-w-collapsed: 72px;
  --page-max: 1560px;
  --z-drawer: 60; --z-modal: 70; --z-toast: 90; --z-palette: 100;
}

/* ---------------- Tema escuro (padrão) ---------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #050d17;
  --bg-grid: rgba(110, 180, 240, .05);
  --bg-glow-1: rgba(11, 116, 255, .20);
  --bg-glow-2: rgba(29, 201, 255, .09);

  --surface-1: #08192b;
  --surface-2: #0c2438;
  --surface-3: #103049;
  --surface-glass: rgba(8, 25, 43, .72);
  --surface-input: #061626;

  --line: rgba(122, 190, 240, .14);
  --line-strong: rgba(122, 190, 240, .28);

  --text-1: #eaf6ff;
  --text-2: #ffffff;
  --text-3: #7191a7;
  --text-on-brand: #ffffff;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .38);
  --shadow-3: 0 28px 70px rgba(0, 0, 0, .52);
  --shadow-brand: 0 12px 30px rgba(11, 116, 255, .28);

  --ok-bg: rgba(47, 214, 160, .12);
  --ok-line: rgba(47, 214, 160, .32);
  --ok-text: #6ceabd;
  --warn-bg: rgba(255, 176, 32, .12);
  --warn-line: rgba(255, 176, 32, .30);
  --warn-text: #ffd07a;
  --danger-bg: rgba(255, 95, 116, .12);
  --danger-line: rgba(255, 95, 116, .30);
  --danger-text: #ff9caa;
  --info-bg: rgba(29, 201, 255, .12);
  --info-line: rgba(29, 201, 255, .30);
  --info-text: #8fe4ff;

  --focus-ring: 0 0 0 3px rgba(29, 201, 255, .45);

/* Cromia do shell: topbar #01017a, sidebar #171c64, texto #ffffff */
  --appbar-bg: #01017a;
  --appbar-line: rgba(255, 255, 255, .15);
  --appbar-glow: rgba(255, 255, 255, .10);
  --sidebar-bg: #171c64;
  --sidebar-line: rgba(255, 255, 255, .15);

  /* Pintura única da tela de acesso: marca e formulário dividem o mesmo fundo,
     sem costura vertical entre as duas metades. */
  --auth-bg:
    radial-gradient(760px 520px at 14% 10%, rgba(11, 116, 255, .24), transparent 62%),
    radial-gradient(620px 460px at 88% 86%, rgba(29, 201, 255, .14), transparent 58%),
    linear-gradient(150deg, #030b16 0%, #04152a 52%, #061d31 100%);
}

/* ---------------- Tema claro ---------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eef3f9;
  --bg-grid: rgba(11, 116, 255, .05);
  --bg-glow-1: rgba(11, 116, 255, .10);
  --bg-glow-2: rgba(29, 201, 255, .10);

  --surface-1: #ffffff;
  --surface-2: #f5f8fc;
  --surface-3: #e9f0f8;
  --surface-glass: rgba(255, 255, 255, .82);
  --surface-input: #ffffff;

  --line: rgba(14, 48, 82, .13);
  --line-strong: rgba(14, 48, 82, .26);

  --text-1: #0a1c2e;
  --text-2: #000000;
  --text-3: #6b849b;
  --text-on-brand: #ffffff;

  --shadow-1: 0 1px 2px rgba(12, 40, 70, .07);
  --shadow-2: 0 10px 26px rgba(12, 40, 70, .10);
  --shadow-3: 0 24px 60px rgba(12, 40, 70, .16);
  --shadow-brand: 0 10px 26px rgba(11, 116, 255, .22);

  --ok-bg: rgba(9, 154, 106, .10);
  --ok-line: rgba(9, 154, 106, .28);
  --ok-text: #0a7a55;
  --warn-bg: rgba(184, 118, 0, .10);
  --warn-line: rgba(184, 118, 0, .28);
  --warn-text: #8a5c00;
  --danger-bg: rgba(206, 32, 58, .09);
  --danger-line: rgba(206, 32, 58, .26);
  --danger-text: #b3182f;
  --info-bg: rgba(11, 116, 255, .09);
  --info-line: rgba(11, 116, 255, .26);
  --info-text: #0a5ed6;

  --focus-ring: 0 0 0 3px rgba(11, 116, 255, .35);

  --appbar-bg: #01017a;
  --appbar-line: rgba(0, 0, 0, .15);
  --appbar-glow: rgba(0, 0, 0, .10);
  --sidebar-bg: #171c64;
  --sidebar-line: rgba(0, 0, 0, .15);

  --auth-bg:
    radial-gradient(760px 520px at 14% 10%, rgba(11, 116, 255, .16), transparent 62%),
    radial-gradient(620px 460px at 88% 86%, rgba(29, 201, 255, .16), transparent 58%),
    linear-gradient(150deg, #f6f9fd 0%, #e9f1fb 52%, #e2f1f9 100%);
}