/*
 * Tokens da v2 (Renan, 30/10): a v2 tem guia próprio, separado do app atual (web/).
 * Modo claro em concreto frio, botão no coral do logo com texto escuro, texto em coral
 * no laranja queimado. O logo não muda (Figma: marca/cometa).
 * O app copia este arquivo para v2/app/src/tokens.css, sem editar lá.
 */
/* Timerush · tokens.css (gerado por _src/tokens.py; não edite à mão)
   Uso: <html data-theme="dark|light">. Padrão: dark. Marca: coral (accent) + âmbar (secondary) + --tr-gradient-brand.
   Componentes só usam as variáveis semânticas (--tr-accent, --tr-text...), nunca hex. */
:root {
  --tr-font-display: 'Barlow', system-ui, sans-serif;
  --tr-font-ui: 'Barlow', system-ui, sans-serif;
  --tr-font-num: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --tr-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* 12 estilos oficiais do Figma (Sol/Noite), mais Cabeçalho, Número/XL e Número/S. */
  --tr-type-display: 600 28px/34px var(--tr-font-display); --tr-track-display: -0.01em;
  --tr-type-title-lg: 600 28px/34px var(--tr-font-display); --tr-track-title-lg: -0.01em;
  --tr-type-title: 600 21px/26px var(--tr-font-display); --tr-track-title: -0.005em;
  --tr-type-body-lg: 400 19px/26px var(--tr-font-ui); --tr-track-body-lg: 0;
  --tr-type-body: 400 17px/24px var(--tr-font-ui); --tr-track-body: 0;
  --tr-type-label: 500 15px/20px var(--tr-font-ui); --tr-track-label: 0;
  --tr-type-button: 600 17px/22px var(--tr-font-ui); --tr-track-button: 0;
  --tr-type-caption: 400 14px/20px var(--tr-font-ui); --tr-track-caption: 0.005em;
  --tr-type-overline: 500 12px/16px var(--tr-font-ui); --tr-track-overline: 0;
  --tr-type-section: 600 17px/22px var(--tr-font-ui); --tr-track-section: 0;
  --tr-type-num-hero: 700 64px/64px var(--tr-font-num); --tr-track-num-hero: 0;
  --tr-type-num-xl: 700 48px/50px var(--tr-font-num); --tr-track-num-xl: 0;
  /* Janela do card: Número/Herói 64 no box de 276×100 do frame (duas linhas de 50). */
  --tr-type-janela: 700 64px/50px var(--tr-font-num); --tr-track-janela: 0;
  --tr-janela-w: 276px;
  --tr-janela-h: 100px;
  /* Céu oficial 283×133. O card soma esse céu ao respiro 17+15. */
  --tr-card-w: 315px;
  --tr-card-h: 495px;
  --tr-card-pad-t: 17px;
  --tr-card-pad-r: 15px;
  --tr-card-pad-b: 17px;
  --tr-card-pad-l: 17px;
  --tr-ceu-w: 283px;
  --tr-ceu-h: 133px;
  --tr-etiqueta-w: 61px;
  --tr-nums-h: 58px;
  --tr-atalho-h: 38px;
  --tr-pro-linha-h: 83px;
  --tr-seja-w: 94px;
  --tr-seja-h: 36px;
  --tr-seja-gap: 6px;
  --tr-seja-pad: 13px;
  --tr-seja-rotulo-h: 16px;
  --tr-seja-ico-w: 14px;
  --tr-seja-ico-h: 12px;
  --tr-type-seja: 600 13px/16px var(--tr-font-ui);
  --tr-dia: 15px;
  --tr-hora: 18px;
  --tr-type-dia: 400 var(--tr-dia)/var(--tr-dia) var(--tr-font-ui);
  --tr-type-hora: 400 var(--tr-hora)/var(--tr-hora) var(--tr-font-ui);
  --tr-sep: 6px;
  --tr-wx: 14px;
  --tr-wx-gap: 4px;
  --tr-hairline: 1px;
  --tr-marca-w: 113px;
  --tr-marca-h: 28px;
  --tr-avatar: 40px;
  --tr-avatar-pro: 44px;
  --tr-radius-ceu: 16px;
  --tr-type-num-lg: 700 32px/36px var(--tr-font-num); --tr-track-num-lg: 0;
  --tr-type-num: 600 22px/26px var(--tr-font-num); --tr-track-num: 0;
  --tr-type-num-sm: 600 17px/20px var(--tr-font-num); --tr-track-num-sm: 0;
  /* Número/Selo: condensado, 12/12, tracking 4%, caixa alta. */
  --tr-type-selo: 600 12px/12px var(--tr-font-num); --tr-track-selo: 0.04em;
  --tr-wordmark-splash: 48px;
  --tr-dot: 6px;
  --tr-dot-on: 8px;
  /* Selo Pico: paradas fixas do componente, não trocam com o tema. */
  --tr-gradient-pico: linear-gradient(122deg, #FF6A4D 0%, #FF6A4D 72%, #FFB547 100%);
  --tr-on-pico: #FFFFFF;
  /* Botões sobre o card coral do turno (revisão de 03/11): iguais nos dois temas. */
  --tr-button-neutral: #1B1B1B;
  --tr-on-button-neutral: #FFFFFF;
  --tr-space-0: 0px;
  --tr-space-0-5: 2px;
  --tr-space-1: 4px;
  --tr-space-2: 8px;
  --tr-space-3: 12px;
  --tr-space-4: 16px;
  --tr-space-5: 20px;
  --tr-space-6: 24px;
  --tr-space-8: 32px;
  --tr-space-10: 40px;
  --tr-space-12: 48px;
  --tr-space-16: 64px;
  --tr-radius-bar: 3px;
  --tr-radius-xs: 6px;
  --tr-radius-sm: 10px;
  --tr-radius-md: 10px;
  --tr-radius-lg: 12px;
  --tr-radius-xl: 16px;
  --tr-radius-pill: 999px;
  --tr-z-map: 0;
  --tr-z-map-overlay: 100;
  --tr-z-pin-selected: 150;
  --tr-z-header: 200;
  --tr-z-nav: 200;
  --tr-z-sheet: 300;
  --tr-z-toast: 400;
  --tr-z-modal: 500;
  --tr-dur-instant: 80ms;
  --tr-dur-fast: 140ms;
  --tr-dur-base: 220ms;
  --tr-dur-slow: 360ms;
  --tr-dur-trail: 640ms;
  --tr-dur-onda: 4.5s;
  --tr-brilho: 1;
  --tr-heat: 0;
  --tr-ease-rush: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tr-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tr-target-min: 48px;
  --tr-target-primary: 56px;
  --tr-elev-0: none;
  /* breakpoints (referência; CSS não aceita var() em @media): sm 360px, md 600px, lg 960px, xl 1280px */
}
:root, [data-theme="dark"] {
  color-scheme: dark;
  --tr-bg: #141418;
  --tr-surface: #1C1C21;
  --tr-surface-2: #25252B;
  --tr-surface-3: #303038;
  --tr-border: #33333B;
  --tr-border-strong: #4A4A55;
  --tr-text: #F5F5F7;
  --tr-text-2: #B0B0B8;
  --tr-text-3: #9A9AA4;
  --tr-wx-ink: #A1A1AA;
  --tr-accent: #FF6A4D;
  --tr-accent-hover: #FF8468;
  --tr-accent-press: #E85A3E;
  --tr-on-accent: #0B0B0E;
  --tr-secondary: #FFB547;
  --tr-on-secondary: #0B0B0E;
  --tr-success: #4ADE80;
  --tr-warning: #FFB547;
  --tr-danger: #FF5C7A;
  --tr-on-danger: #0B0B0E;
  --tr-info: #5CB8FF;
  --tr-layer-airport: #9B8CFF;
  --tr-layer-event: #E07BFF;
  --tr-layer-fuel: #D4D4D8;
  --tr-layer-ev: #2DD4BF;
  --tr-map-bg: #101014;
  --tr-map-road: #1E1E25;
  --tr-map-road-major: #2C2C35;
  --tr-map-water: #0D1A24;
  --tr-map-park: #0F1913;
  --tr-map-label: #8B8B94;
  --tr-scrim: rgba(0,0,0,0.56);
  --tr-elev-overlay: 0 8px 24px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.06);
  --tr-elev-1: 0 0 0 1px var(--tr-border); /* flat: card = superfície + borda */
  --tr-elev-2: var(--tr-elev-overlay);     /* só o que flutua sobre o mapa */
  /* gradiente-assinatura: só o logo e o selo de pico. A próxima onda usa o âmbar. */
  --tr-gradient-brand: linear-gradient(45deg, var(--tr-secondary) 0%, var(--tr-accent) 100%);
  --tr-gradient-brand-glow: radial-gradient(60% 60% at 70% 30%, color-mix(in srgb, var(--tr-accent) 22%, transparent), transparent 70%);
  /* texto e link no escuro: âmbar claro (revisão de 03/11), 9,1:1 no fundo e 8,4:1 na superfície */
  --tr-accent-text: #F2A65A;
  /* borda dos campos (5,0:1 na superfície) e contorno da seleção (6,0:1 na superfície, 6,5:1 no fundo), revisão de 03/11 */
  --tr-border-input: #8B8B94;
  --tr-border-selected: #FF6A4D;
  /* céu animado do card do aeroporto (Ceu.tsx) */
  --tr-ceu-topo: #141419;
  --tr-ceu-base: #1C1C21;
  --tr-ceu-nuvem: #303038;
  --tr-ceu-nuvem-2: #25252B;
  --tr-ceu-chuva: #4A4A55;
  --tr-ceu-pista: #4A4A55;
  --tr-ceu-faixa: #9A9AA4;
  --tr-ceu-torre: #4A4A55;
  --tr-ceu-lua: #B0B0B8;
  --tr-ceu-sol: #FFB547;
}
[data-theme="light"] {
  color-scheme: light;
  --tr-bg: #ECEDEF;
  --tr-surface: #FFFFFF;
  --tr-surface-2: #E1E3E7;
  --tr-surface-3: #D5D8DD;
  --tr-border: #D3D6DB;
  --tr-border-strong: #BCC0C7;
  --tr-text: #1B1B1B;
  --tr-text-2: #4F535A;
  --tr-text-3: #5E626A;
  --tr-wx-ink: #4F535A;
  --tr-accent: #FF6A4D;
  --tr-accent-hover: #FF8468;
  --tr-accent-press: #E85A3E;
  --tr-on-accent: #1B1B1B;
  --tr-secondary: #A66500; /* âmbar mais vivo (30/10): branco sobre ele 4,7:1 */
  --tr-on-secondary: #FFFFFF;
  --tr-success: #157A3A;
  --tr-warning: #8B5800;
  --tr-danger: #C4123A;
  --tr-on-danger: #FFFFFF;
  --tr-info: #0067B8;
  --tr-layer-airport: #5B45E0;
  --tr-layer-event: #9C00CC;
  --tr-layer-fuel: #3F3F46;
  --tr-layer-ev: #0F7368;
  --tr-map-bg: #E1E3E7;
  --tr-map-road: #FFFFFF;
  --tr-map-road-major: #FFFFFF;
  --tr-map-water: #BCD0DC;
  --tr-map-park: #D2DCC6;
  --tr-map-label: #4F535A;
  --tr-scrim: rgba(27,27,27,0.40);
  --tr-elev-overlay: 0 6px 20px rgba(27,27,27,0.14), 0 0 0 1px rgba(27,27,27,0.06);
  --tr-elev-1: 0 0 0 1px var(--tr-border); /* flat: card = superfície + borda */
  --tr-elev-2: var(--tr-elev-overlay);     /* só o que flutua sobre o mapa */
  /* gradiente-assinatura: só o logo e o selo de pico. A próxima onda usa o âmbar. */
  --tr-gradient-brand: linear-gradient(45deg, var(--tr-secondary) 0%, var(--tr-accent) 100%);
  --tr-gradient-brand-glow: radial-gradient(60% 60% at 70% 30%, color-mix(in srgb, var(--tr-accent) 22%, transparent), transparent 70%);
  /* texto e link em coral no claro: laranja queimado, 5:1 no fundo concreto (Renan, 30/10) */
  --tr-accent-text: #A8480C;
  /* borda dos campos (3,25:1 no branco) e contorno da seleção (3,5:1 no branco, 3,0:1 no fundo), revisão de 03/11 */
  --tr-border-input: #8A8F98;
  --tr-border-selected: #E85A3E;
  --tr-ceu-topo: #F3F4F6;
  --tr-ceu-base: #FFFFFF;
  --tr-ceu-nuvem: #D5D8DD;
  --tr-ceu-nuvem-2: #E1E3E7;
  --tr-ceu-chuva: #BCC0C7;
  --tr-ceu-pista: #BCC0C7;
  --tr-ceu-faixa: #FFFFFF;
  --tr-ceu-torre: #5E626A;
  --tr-ceu-lua: #5E626A;
  --tr-ceu-sol: #FFB547;
}
/* tons suaves (fundo de badge/banner) derivados das semânticas */
:root, [data-theme] {
  --tr-accent-soft: color-mix(in srgb, var(--tr-accent) 16%, transparent);
  --tr-secondary-soft: color-mix(in srgb, var(--tr-secondary) 16%, transparent);
  --tr-success-soft: color-mix(in srgb, var(--tr-success) 16%, transparent);
  --tr-warning-soft: color-mix(in srgb, var(--tr-warning) 16%, transparent);
  --tr-danger-soft: color-mix(in srgb, var(--tr-danger) 16%, transparent);
  --tr-info-soft: color-mix(in srgb, var(--tr-info) 16%, transparent);
}
[data-theme="light"] {
  --tr-accent-soft: color-mix(in srgb, var(--tr-accent) 14%, transparent);
  --tr-secondary-soft: color-mix(in srgb, var(--tr-secondary) 8%, transparent);
}
@media (prefers-reduced-motion: reduce) { :root { --tr-dur-fast: 0ms; --tr-dur-base: 0ms; --tr-dur-slow: 0ms; --tr-dur-trail: 0ms; --tr-dur-onda: 0ms; } }