/*
 * SealOUT — tokens de design "Neon Glass".
 *
 * Identidade tirada do logo: fundo carbono azulado com colmeia discreta, azul
 * elétrico da marca (#1E9BFF → ciano), prata no texto. Sobre essa base, acentos
 * vivos para dados (laranja, âmbar, amarelo, verde, ciano, violeta), vidro com
 * brilho especular forte e brilhos (glow) nas cores dos dados.
 *
 * Espelha res/values(-night)/colors_m3.xml do app nativo, então as telas nativas e
 * as páginas do WebView ficam iguais. Os nomes seguem os papéis do Material 3; os
 * aliases legados (--bg-base, --bg-surface, --brand-primary...) continuam
 * resolvendo para os tokens canônicos, então todas as páginas herdam o visual.
 *
 * O desfoque (backdrop-filter) só entra onde o navegador suporta (@supports em
 * styles.css); no WebView da central (Chrome 58) o vidro usa camadas um pouco mais
 * opacas. Tipografia: Inter (SIL OFL, embutida em shared/fonts/).
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Inter-Bold.woff2") format("woff2");
}

/* ================================================================
   ESCURO (padrão — é o que a central usa na maior parte do tempo)
   ================================================================ */
:root {
    --primary: #1E9BFF;
    --on-primary: #FFFFFF;
    --primary-container: #0B2E55;
    --on-primary-container: #CFE7FF;
    --secondary: #8EA3BF;
    --on-secondary: #06101E;
    --secondary-container: #1B2433;
    --on-secondary-container: #E6EEF9;
    --tertiary: #22D3EE;
    --on-tertiary: #03242B;
    --tertiary-container: #083A44;
    --on-tertiary-container: #C9F6FF;
    --error: #FF4D5E;
    --on-error: #FFFFFF;
    --error-container: #4C1219;
    --on-error-container: #FFDADF;
    --background: #05070B;
    --on-background: #F4F7FB;
    --surface: #070A10;
    --on-surface: #F4F7FB;
    --surface-variant: #1A2230;
    --on-surface-variant: #A9B6C9;
    --surface-dim: #05070B;
    --surface-bright: #2A3549;
    --surface-container-lowest: #040609;
    --surface-container-low: #0B0F17;
    --surface-container: #111723;
    --surface-container-high: #182030;
    --surface-container-highest: #212B3D;
    --outline: #71819A;
    --outline-variant: #253044;
    --inverse-surface: #EEF3FA;
    --inverse-on-surface: #111723;
    --inverse-primary: #0066D6;
    --scrim: #000000;
    --status-success: #32D74B;
    --status-warning: #FF9F0A;
    --status-danger: #FF453A;
    --status-info: #5AC8FA;
    --status-success-container: rgba(50, 215, 75, 0.16);
    --status-warning-container: rgba(255, 159, 10, 0.16);
    --status-danger-container: rgba(255, 69, 58, 0.16);
    --status-info-container: rgba(90, 200, 250, 0.16);

    /* Acentos vivos — dados, ícones, gráficos (nomes --ios-* mantidos por
       compatibilidade com as páginas existentes) */
    --ios-blue: #1E9BFF;
    --ios-green: #32D74B;
    --ios-red: #FF453A;
    --ios-orange: #FF9F0A;
    --ios-yellow: #FFD60A;
    --ios-mint: #2DD4BF;
    --ios-teal: #14C8D8;
    --ios-cyan: #22D3EE;
    --ios-indigo: #6E7BFF;
    --ios-purple: #BF5AF2;
    --ios-pink: #FF375F;
    --ios-brown: #C8956C;
    --ios-gray: #8E9AAF;

    --accent-blue: #1E9BFF;
    --accent-cyan: #22D3EE;
    --accent-teal: #2DD4BF;
    --accent-green: #32D74B;
    --accent-lime: #A3E635;
    --accent-yellow: #FFD60A;
    --accent-amber: #FFB020;
    --accent-orange: #FF8A00;
    --accent-red: #FF453A;
    --accent-pink: #FF375F;
    --accent-purple: #BF5AF2;
    --accent-violet: #7C5CFF;

    /* Gradientes de marca e de dados */
    --grad-brand: linear-gradient(135deg, #5CD6FF 0%, #1E9BFF 45%, #0A5CFF 100%);
    --grad-energy: linear-gradient(90deg, #22D3EE 0%, #32D74B 100%);
    --grad-charge: linear-gradient(90deg, #32D74B 0%, #A3E635 100%);
    --grad-heat: linear-gradient(180deg, #FFC24D 0%, #FF8A00 55%, #FF5A00 100%);
    --grad-warm: linear-gradient(135deg, #FFD60A 0%, #FF9F0A 100%);
    --grad-cool: linear-gradient(135deg, #22D3EE 0%, #1E9BFF 100%);
    --grad-danger: linear-gradient(135deg, #FF7A6B 0%, #FF2D55 100%);
    --grad-violet: linear-gradient(135deg, #D07BFF 0%, #7C5CFF 100%);
    --grad-silver: linear-gradient(180deg, #FFFFFF 0%, #C9D2DE 55%, #8C98AA 100%);

    /* Brilho (glow) atrás de números e gráficos */
    --glow-blue: 0 0 24px rgba(30, 155, 255, 0.45);
    --glow-cyan: 0 0 24px rgba(34, 211, 238, 0.40);
    --glow-green: 0 0 24px rgba(50, 215, 75, 0.38);
    --glow-orange: 0 0 24px rgba(255, 138, 0, 0.42);
    --glow-red: 0 0 24px rgba(255, 69, 58, 0.42);

    /* Material de vidro — mais luminoso que o do iOS, com aro e reflexo */
    --glass-card: rgba(20, 28, 43, 0.66);             /* cartões de conteúdo */
    --glass-card-strong: rgba(17, 24, 37, 0.90);      /* cartões sobre mapa/vídeo */
    --glass-tile: rgba(120, 150, 200, 0.10);          /* bloco dentro de cartão */
    --glass-chrome: rgba(9, 13, 21, 0.74);            /* barras, laterais, abas */
    --glass-chrome-solid: rgba(9, 13, 21, 0.95);      /* idem, sem desfoque */
    --glass-sheet: rgba(18, 25, 38, 0.86);            /* modais, folhas */
    --glass-sheet-solid: rgba(16, 22, 34, 0.98);
    --glass-control: rgba(120, 150, 200, 0.16);       /* botões/campos neutros */
    --glass-control-hover: rgba(120, 150, 200, 0.26);
    --glass-selected: rgba(30, 155, 255, 0.20);       /* item ativo da lateral */
    --glass-rim: rgba(160, 200, 255, 0.14);           /* aro claro */
    --glass-rim-strong: rgba(170, 210, 255, 0.26);
    --glass-specular: rgba(255, 255, 255, 0.22);      /* brilho do topo */
    --glass-gloss: linear-gradient(165deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 55%);
    --glass-edge: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(190, 225, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    --glass-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    --glass-shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.40);
    --glass-blur: 26px;
    --glass-saturate: 190%;

    /* Fundo ambiente atrás do vidro (azul da marca, ciano e um toque quente) */
    --ambient-base: #05070B;
    --ambient-glow-1: rgba(30, 155, 255, 0.24);
    --ambient-glow-1-clear: rgba(30, 155, 255, 0);
    --ambient-glow-2: rgba(34, 211, 238, 0.13);
    --ambient-glow-2-clear: rgba(34, 211, 238, 0);
    --ambient-glow-3: rgba(255, 138, 0, 0.07);
    --ambient-glow-3-clear: rgba(255, 138, 0, 0);
    /* Colmeia do logo, bem discreta */
    --ambient-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='83.14' viewBox='0 0 48 83.14'%3E%3Cpath d='M24 0L48 13.86V41.57L24 55.43L0 41.57V13.86ZM24 55.43V83.14' fill='none' stroke='%23A8C8FF' stroke-opacity='0.055' stroke-width='1'/%3E%3C/svg%3E");

    /* Formas */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 26px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* Espaçamento */
    --page-pad-x: 24px;
    --page-pad-y: 20px;
    --card-gap: 14px;
    --card-pad: 20px;
    --card-pad-hero: 24px;
    --tile-min-h: 128px;

    /* Tipografia */
    --family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --family-mono: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
    --tracking-display: -0.02em;
    --tracking-headline: -0.01em;
    --tracking-title: 0;
    --tracking-label: 0.02em;

    /* Movimento */
    --duration-short: 180ms;
    --duration-med: 280ms;
    --duration-long: 460ms;
    --easing-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
    --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --easing-decel: cubic-bezier(0.0, 0.0, 0.2, 1.0);
    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Elevação */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 18px 52px rgba(0, 0, 0, 0.60);

    /* Aliases legados (não usar em código novo) */
    --bg-base: var(--surface);
    --bg-surface: var(--surface-container);
    --bg-elevated: var(--surface-container-high);
    --bg-hover: var(--surface-container-highest);
    --text-primary: var(--on-surface);
    --text-secondary: var(--on-surface-variant);
    --text-muted: var(--outline);
    --brand-primary: var(--primary);
    --brand-secondary: var(--tertiary);
    --brand-primary-translucent: rgba(30, 155, 255, 0.28);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --danger: var(--status-danger);
}

/* ================================================================
   CLARO
   ================================================================ */
:root[data-theme="light"] {
    --primary: #0A7CF0;
    --on-primary: #FFFFFF;
    --primary-container: #D5E9FF;
    --on-primary-container: #00264D;
    --secondary: #5B6B82;
    --on-secondary: #FFFFFF;
    --secondary-container: #E3EAF4;
    --on-secondary-container: #111723;
    --tertiary: #0891B2;
    --on-tertiary: #FFFFFF;
    --tertiary-container: #CFF5FC;
    --on-tertiary-container: #032F3A;
    --error: #D70F2A;
    --on-error: #FFFFFF;
    --error-container: #FFDADF;
    --on-error-container: #410008;
    --background: #EEF3FA;
    --on-background: #0A0F18;
    --surface: #EEF3FA;
    --on-surface: #0A0F18;
    --surface-variant: #E1E8F2;
    --on-surface-variant: #55647A;
    --surface-dim: #D6DEEA;
    --surface-bright: #FFFFFF;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #F7FAFE;
    --surface-container: #FFFFFF;
    --surface-container-high: #F4F7FC;
    --surface-container-highest: #E7EDF6;
    --outline: #7A889D;
    --outline-variant: #CDD6E3;
    --inverse-surface: #111723;
    --inverse-on-surface: #EEF3FA;
    --inverse-primary: #5CB8FF;
    --scrim: #000000;
    --status-success: #1F9D3A;
    --status-warning: #C95A00;
    --status-danger: #D70F2A;
    --status-info: #0071A4;
    --status-success-container: rgba(31, 157, 58, 0.13);
    --status-warning-container: rgba(255, 138, 0, 0.15);
    --status-danger-container: rgba(215, 15, 42, 0.11);
    --status-info-container: rgba(10, 124, 240, 0.11);

    --ios-blue: #0A7CF0;
    --ios-green: #1FAE45;
    --ios-red: #F02D3A;
    --ios-orange: #FF7A00;
    --ios-yellow: #F5B800;
    --ios-mint: #0FB5A4;
    --ios-teal: #06A9BD;
    --ios-cyan: #06B6D4;
    --ios-indigo: #5A55F0;
    --ios-purple: #A83CE0;
    --ios-pink: #F2295A;
    --ios-brown: #A8744E;
    --ios-gray: #7A889D;

    --accent-blue: #0A7CF0;
    --accent-cyan: #06B6D4;
    --accent-teal: #0FB5A4;
    --accent-green: #1FAE45;
    --accent-lime: #65A30D;
    --accent-yellow: #F5B800;
    --accent-amber: #F59E0B;
    --accent-orange: #FF7A00;
    --accent-red: #F02D3A;
    --accent-pink: #F2295A;
    --accent-purple: #A83CE0;
    --accent-violet: #6D4DF5;

    --grad-brand: linear-gradient(135deg, #3BB4FF 0%, #0A7CF0 50%, #0A4FD8 100%);
    --grad-silver: linear-gradient(180deg, #2A3445 0%, #55647A 100%);

    --glow-blue: 0 0 18px rgba(10, 124, 240, 0.22);
    --glow-cyan: 0 0 18px rgba(6, 182, 212, 0.22);
    --glow-green: 0 0 18px rgba(31, 174, 69, 0.20);
    --glow-orange: 0 0 18px rgba(255, 122, 0, 0.22);
    --glow-red: 0 0 18px rgba(240, 45, 58, 0.22);

    --glass-card: rgba(255, 255, 255, 0.80);
    --glass-card-strong: rgba(255, 255, 255, 0.92);
    --glass-tile: rgba(90, 120, 170, 0.08);
    --glass-chrome: rgba(247, 250, 254, 0.74);
    --glass-chrome-solid: rgba(247, 250, 254, 0.96);
    --glass-sheet: rgba(255, 255, 255, 0.86);
    --glass-sheet-solid: rgba(255, 255, 255, 0.98);
    --glass-control: rgba(90, 120, 170, 0.11);
    --glass-control-hover: rgba(90, 120, 170, 0.19);
    --glass-selected: rgba(10, 124, 240, 0.12);
    --glass-rim: rgba(20, 50, 100, 0.08);
    --glass-rim-strong: rgba(20, 50, 100, 0.14);
    --glass-specular: rgba(255, 255, 255, 0.95);
    --glass-gloss: linear-gradient(165deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 35%, rgba(255, 255, 255, 0) 60%);
    --glass-edge: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%);
    --glass-shadow: 0 14px 40px rgba(20, 45, 90, 0.13), 0 2px 6px rgba(20, 45, 90, 0.06);
    --glass-shadow-soft: 0 6px 22px rgba(20, 45, 90, 0.09);

    --ambient-base: #EEF3FA;
    --ambient-glow-1: rgba(10, 124, 240, 0.14);
    --ambient-glow-1-clear: rgba(10, 124, 240, 0);
    --ambient-glow-2: rgba(6, 182, 212, 0.10);
    --ambient-glow-2-clear: rgba(6, 182, 212, 0);
    --ambient-glow-3: rgba(255, 122, 0, 0.06);
    --ambient-glow-3-clear: rgba(255, 122, 0, 0);
    --ambient-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='83.14' viewBox='0 0 48 83.14'%3E%3Cpath d='M24 0L48 13.86V41.57L24 55.43L0 41.57V13.86ZM24 55.43V83.14' fill='none' stroke='%230A3A7A' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E");

    --brand-primary-translucent: rgba(10, 124, 240, 0.20);

    /* Elevação (clara) */
    --shadow-sm: 0 1px 3px rgba(20, 45, 90, 0.08);
    --shadow-md: 0 8px 22px rgba(20, 45, 90, 0.11);
    --shadow-lg: 0 16px 48px rgba(20, 45, 90, 0.15);
}