/*
 * Rastram — tokens do design system.
 *
 * Cópia de produto de design/rastram-design-system/produto/css/rastram-tokens.css (gerado de
 * tokens.json; comentários internos mantidos como no gerador) mais os atalhos tipográficos
 * --rs-type-*. ÚNICA declaração dos valores primitivos: nenhum outro arquivo do painel repete um
 * literal que exista aqui — exceção documentada: os shells inline do index.html, que rodam sem CSS.
 *
 * Quem consome:
 * - painel: <link> em index.html, ANTES de app.css;
 * - tema de login do Keycloak da plataforma PHS.Identity (identity-platform-prd): recebe uma CÓPIA
 *   deste arquivo com o mesmo nome — republicar lá a cada mudança aqui.
 *
 * `color-scheme` segue o tema ESCOLHIDO (data-tema), não o do sistema: barra de rolagem, <select> e
 * cursor são pintados pelo navegador, e no tema claro com o sistema em escuro apareciam pretos
 * dentro de diálogos claros. Declarado junto dos tokens, trocar de tema troca os dois.
 */
:root,
body[data-tema="claro"] {
  color-scheme: light;
  /* Brand and warm neutrals (constant) */
  --brand-cream: #fffdf2;
  --brand-black: #000000;
  --brand-orange: #feae0f;
  --brand-orange-hover: #e59d0e;
  --brand-orange-pressed: #cb8b0c;
  --neutral-50: #f5f3e8;
  --neutral-100: #ebe9df;
  --neutral-200: #d6d5cb;
  --neutral-300: #b2b1a9;
  --neutral-400: #999891;
  --neutral-500: #807e79;
  --neutral-600: #61605c;
  --neutral-700: #4d4c49;
  --neutral-800: #292827;
  --neutral-900: #191918;
  --neutral-950: #0d0d0c;
  /* Functional (not brand) */
  --functional-danger: #b3261e;
  --functional-danger-hover: #9f1d17;
  --functional-success: #1e6e3c;
  --functional-warning: #f2c230;
  /* Backgrounds */
  --bg-canvas: var(--brand-cream);
  --bg-subtle: var(--neutral-50);
  --bg-inverse: var(--brand-black);
  --bg-scrim: #0000007a;
  --bg-photo-band: #000000b8;
  /* Surfaces */
  --surface-default: var(--brand-cream);
  --surface-raised: var(--brand-cream);
  --surface-muted: var(--neutral-100);
  --surface-inverse: var(--brand-black);
  --surface-accent: var(--brand-orange);
  /* Text */
  --text-primary: var(--brand-black);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-600);
  --text-disabled: var(--neutral-500);
  --text-inverse: var(--brand-cream);
  --text-on-accent: var(--brand-black);
  --text-on-danger: var(--brand-cream);
  --text-link: var(--brand-black);
  --text-accent: var(--brand-black);
  /* Borders and dividers */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-500);
  --border-contrast: var(--brand-black);
  --border-accent: var(--brand-orange);
  /* Actions */
  --action-primary-bg: var(--brand-orange);
  --action-primary-bg-hover: var(--brand-orange-hover);
  --action-primary-bg-pressed: var(--brand-orange-pressed);
  --action-primary-fg: var(--text-on-accent);
  --action-secondary-bg: var(--surface-default);
  --action-secondary-fg: var(--text-primary);
  --action-secondary-border: var(--border-contrast);
  --action-subtle-bg-hover: var(--state-hover);
  --action-destructive-bg: var(--functional-danger);
  --action-destructive-bg-hover: var(--functional-danger-hover);
  --action-destructive-fg: var(--text-on-danger);
  --action-disabled-bg: var(--neutral-100);
  --action-disabled-fg: var(--text-disabled);
  /* Interactive states */
  --state-hover: var(--neutral-100);
  --state-pressed: var(--neutral-200);
  --state-selected-fill: var(--brand-black);
  --state-selected-on: var(--brand-cream);
  --state-active: var(--brand-orange);
  --state-on-active: var(--brand-black);
  --state-indicator: var(--brand-black);
  /* Vehicle and system statuses */
  --status-moving-bg: var(--brand-orange);
  --status-moving-fg: var(--brand-black);
  --status-stopped-bg: var(--surface-default);
  --status-stopped-fg: var(--text-primary);
  --status-stopped-border: var(--border-contrast);
  --status-offline-bg: var(--surface-muted);
  --status-offline-fg: var(--text-secondary);
  --status-offline-border: var(--border-strong);
  --status-blocked-bg: var(--surface-inverse);
  --status-blocked-fg: var(--text-inverse);
  --status-pending-bg: var(--surface-default);
  --status-pending-fg: var(--text-primary);
  --status-pending-border: var(--border-accent);
  --status-alarm-bg: var(--functional-danger);
  --status-alarm-fg: var(--text-on-danger);
  --status-nogps-bg: var(--functional-warning);
  --status-nogps-fg: var(--brand-black);
  --status-towing-bg: var(--surface-default);
  --status-towing-fg: var(--functional-danger);
  --status-towing-border: var(--functional-danger);
  --status-failed: var(--functional-danger);
  --status-confirmed: var(--functional-success);
  /* Map */
  --map-overlay-bg: var(--surface-default);
  --map-overlay-border: var(--border-default);
  --map-route: var(--brand-orange);
  --map-route-casing: var(--brand-black);
  --map-route-gap: var(--neutral-700);
  --map-event-fill: var(--brand-black);
  --map-event-ring: var(--brand-cream);
  --map-marker-bg: var(--surface-default);
  --map-marker-border: var(--border-contrast);
  --map-marker-selected: var(--brand-orange);
  --map-my-location: var(--brand-black);
  --map-accuracy: #0000001f;
  /* Classificação de risco das áreas (extensão do painel, fora do pacote de design): preenchimento
     semitransparente pelo CSS (.tl-area--*) e contorno mais escuro, que separa a área do ladrilho. */
  --risk-low-fill: #34a853;
  --risk-low-stroke: #1b6b34;
  --risk-moderate-fill: #f5c400;
  --risk-moderate-stroke: #8a6d00;
  --risk-high-fill: #f06d06;
  --risk-high-stroke: #a34400;
  --risk-critical-fill: #d93025;
  --risk-critical-stroke: #8c1d15;
  /* Focus */
  --focus-inner: var(--brand-black);
  --focus-outer: var(--brand-cream);
  /* Shadows */
  --shadow-overlay: 0 1px 2px #0000001a, 0 4px 12px #00000014;
  --shadow-dialog: 0 16px 40px #0000002e;
  --focus-halo: 0 0 0 6px #fffdf2;
}

body[data-tema="escuro"] {
  color-scheme: dark;
  /* Every semantic token is re-declared so aliases resolve against the dark values. */
  /* Functional (not brand) */
  --functional-danger: #ff8a7a;
  --functional-danger-hover: #ff9f91;
  --functional-success: #6ccf8e;
  --functional-warning: #f5cd52;
  /* Backgrounds */
  --bg-canvas: var(--brand-black);
  --bg-subtle: var(--neutral-950);
  --bg-inverse: var(--brand-cream);
  --bg-scrim: #000000b3;
  --bg-photo-band: #000000b8;
  /* Surfaces */
  --surface-default: var(--neutral-900);
  --surface-raised: var(--neutral-800);
  --surface-muted: var(--neutral-800);
  --surface-inverse: var(--brand-cream);
  --surface-accent: var(--brand-orange);
  /* Text */
  --text-primary: var(--brand-cream);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-400);
  --text-disabled: var(--neutral-600);
  --text-inverse: var(--brand-black);
  --text-on-accent: var(--brand-black);
  --text-on-danger: var(--brand-black);
  --text-link: var(--brand-cream);
  --text-accent: var(--brand-orange);
  /* Borders and dividers */
  --border-subtle: var(--neutral-800);
  --border-default: var(--neutral-700);
  --border-strong: var(--neutral-500);
  --border-contrast: var(--brand-cream);
  --border-accent: var(--brand-orange);
  /* Actions */
  --action-primary-bg: var(--brand-orange);
  --action-primary-bg-hover: var(--brand-orange-hover);
  --action-primary-bg-pressed: var(--brand-orange-pressed);
  --action-primary-fg: var(--text-on-accent);
  --action-secondary-bg: var(--surface-default);
  --action-secondary-fg: var(--text-primary);
  --action-secondary-border: var(--border-contrast);
  --action-subtle-bg-hover: var(--state-hover);
  --action-destructive-bg: var(--functional-danger);
  --action-destructive-bg-hover: var(--functional-danger-hover);
  --action-destructive-fg: var(--text-on-danger);
  --action-disabled-bg: var(--neutral-800);
  --action-disabled-fg: var(--text-disabled);
  /* Interactive states */
  --state-hover: var(--neutral-800);
  --state-pressed: var(--neutral-700);
  --state-selected-fill: var(--brand-cream);
  --state-selected-on: var(--brand-black);
  --state-active: var(--brand-orange);
  --state-on-active: var(--brand-black);
  --state-indicator: var(--brand-orange);
  /* Vehicle and system statuses */
  --status-moving-bg: var(--brand-orange);
  --status-moving-fg: var(--brand-black);
  --status-stopped-bg: var(--surface-default);
  --status-stopped-fg: var(--text-primary);
  --status-stopped-border: var(--border-contrast);
  --status-offline-bg: var(--surface-muted);
  --status-offline-fg: var(--text-secondary);
  --status-offline-border: var(--border-strong);
  --status-blocked-bg: var(--surface-inverse);
  --status-blocked-fg: var(--text-inverse);
  --status-pending-bg: var(--surface-default);
  --status-pending-fg: var(--text-primary);
  --status-pending-border: var(--border-accent);
  --status-alarm-bg: var(--functional-danger);
  --status-alarm-fg: var(--text-on-danger);
  --status-nogps-bg: var(--functional-warning);
  --status-nogps-fg: var(--brand-black);
  --status-towing-bg: var(--surface-default);
  --status-towing-fg: var(--functional-danger);
  --status-towing-border: var(--functional-danger);
  --status-failed: var(--functional-danger);
  --status-confirmed: var(--functional-success);
  /* Map */
  --map-overlay-bg: var(--surface-default);
  --map-overlay-border: var(--border-default);
  --map-route: var(--brand-orange);
  --map-route-casing: var(--brand-black);
  --map-route-gap: var(--neutral-300);
  --map-event-fill: var(--brand-cream);
  --map-event-ring: var(--brand-black);
  --map-marker-bg: var(--surface-default);
  --map-marker-border: var(--border-contrast);
  --map-marker-selected: var(--brand-orange);
  --map-my-location: var(--brand-cream);
  --map-accuracy: #fffdf229;
  /* Sobre os ladrilhos escurecidos, o contorno clareia em vez de escurecer. */
  --risk-low-fill: #4cc873;
  --risk-low-stroke: #9be6b3;
  --risk-moderate-fill: #ffd633;
  --risk-moderate-stroke: #ffe98a;
  --risk-high-fill: #ff8c33;
  --risk-high-stroke: #ffbf8f;
  --risk-critical-fill: #ff5a4f;
  --risk-critical-stroke: #ffa59e;
  /* Focus */
  --focus-inner: var(--brand-black);
  --focus-outer: var(--brand-cream);
  /* Shadows */
  --shadow-overlay: 0 4px 16px #000000a6;
  --shadow-dialog: 0 16px 40px #000000cc;
  --focus-halo: 0 0 0 6px #fffdf2;
}

:root {
  /* Spacing (4 px base) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  /* Border widths */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  /* Route language */
  --route-stroke-2: 2px;
  --route-stroke-4: 4px;
  --route-stroke-6: 6px;
  --route-stroke-8: 8px;
  --route-casing: 2px;
  --route-corner-sm: 8px;
  --route-corner-lg: 12px;
  /* Sizes */
  --size-touch: 44px;
  --size-icon-sm: 14px;
  --size-icon-md: 16px;
  --size-icon-lg: 20px;
  --size-dot: 8px;
  --size-marker: 40px;
  --size-event: 14px;
  --size-summary: 640px;
  --size-panel: 400px;
  --size-dialog: 560px;
  --size-dialog-sm: 440px;
  --size-content: 1200px;
  /* Breakpoints (reference only — media queries need literal values) */
  --bp-sm: 480px;
  --bp-md: 720px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
  /* Layers above the map */
  --z-map: 0;
  --z-map-controls: 510;
  --z-toolbar: 520;
  --z-summary: 530;
  --z-panel: 600;
  --z-toast: 900;
  --z-scrim: 1000;
  --z-dialog: 1010;
  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-panel: 280ms;
  --duration-marker: 550ms;
  --duration-toast: 6000ms;
  /* Easing */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: linear;
  /* Families */
  --font-brand: Manrope, Inter, system-ui, sans-serif;
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/*
 * Atalhos tipográficos (peso tamanho/entrelinha família), no lugar de --fs-* e de qualquer
 * família literal nos componentes. Só os passos grandes (Manrope) encolhem abaixo de 720px;
 * os de interface (Inter) nunca encolhem. --font-brand e --font-ui vêm do bloco acima.
 */
:root {
  --rs-type-display: 200 56px/60px var(--font-brand);
  --rs-type-page-title: 700 32px/40px var(--font-brand);
  --rs-type-section-title: 700 22px/28px var(--font-brand);
  --rs-type-data-xl: 700 40px/44px var(--font-brand);
  --rs-type-data-lg: 700 28px/32px var(--font-brand);
  --rs-type-card-title: 600 17px/24px var(--font-ui);
  --rs-type-body: 400 16px/24px var(--font-ui);
  --rs-type-body-strong: 600 16px/24px var(--font-ui);
  --rs-type-supporting: 400 14px/20px var(--font-ui);
  --rs-type-label: 600 14px/20px var(--font-ui);
  --rs-type-button: 600 15px/20px var(--font-ui);
  --rs-type-caption: 400 12px/16px var(--font-ui);
  --rs-type-overline: 600 12px/16px var(--font-ui);
  --rs-type-data-md: 600 16px/20px var(--font-ui);
  --rs-type-data-sm: 400 14px/20px var(--font-ui);
  --rs-type-identifier: 600 14px/20px var(--font-ui);
}

@media (max-width: 719.98px) {
  :root {
    --rs-type-display: 200 40px/44px var(--font-brand);
    --rs-type-page-title: 700 26px/32px var(--font-brand);
    --rs-type-section-title: 700 20px/26px var(--font-brand);
    --rs-type-data-xl: 700 32px/36px var(--font-brand);
  }
}