/* ==========================================================================
   NikitiBus — Design Tokens
   Fonte única de verdade de cores, tipografia, raios, sombras e espaçamento.
   REGRA: nenhuma cor hardcoded fora deste arquivo. Componentes consomem as
   variáveis semânticas (--color-brand, --color-action, …), nunca os hexes.
   ========================================================================== */

:root {
  /* ---- Cor primária — azul da Baía ---------------------------------- */
  --color-primary-900: #0A2C50;  /* títulos / texto azul forte */
  --color-primary-800: #0C447C;  /* brand profundo */
  --color-primary-600: #185FA5;  /* brand principal */
  --color-primary-500: #2E74BB;  /* hover / realces */
  --color-primary-100: #E4EEF8;  /* tint de fundo (chips, seleção) */
  --color-primary-50:  #F2F7FC;

  /* ---- Cor de ação — âmbar de ônibus -------------------------------- */
  --color-accent-700: #A65E0E;   /* âmbar escuro p/ texto sobre claro */
  --color-accent-600: #D9831A;   /* hover do botão */
  --color-accent-500: #EF9F27;   /* âmbar da marca / ônibus */
  --color-accent-100: #FBE9C9;   /* tint */

  /* ---- Neutros quentes (warm gray / stone) -------------------------- */
  --color-ink:        #1C1A17;   /* texto principal (quase-preto quente) */
  --color-ink-soft:   #57534E;   /* texto secundário */
  --color-muted:      #8A8378;   /* texto terciário / placeholder */
  --color-line:       #E7E2DA;   /* bordas */
  --color-surface:    #FFFFFF;   /* cards */
  --color-surface-2:  #FAF8F4;   /* painel/sidebar (off-white quente) */
  --color-surface-glass: rgba(255, 255, 255, .95);  /* card flutuante translúcido */
  --color-bg:         #F4F1EB;   /* fundo do app */

  /* ---- Tokens semânticos (é o que os componentes usam) -------------- */
  --color-brand:        var(--color-primary-600);
  --color-brand-strong: var(--color-primary-800);
  --color-action:       var(--color-accent-500);
  --color-action-hover: var(--color-accent-600);
  --color-on-action:    var(--color-ink);     /* texto ESCURO sobre âmbar (AA) */
  --color-on-brand:     #FFFFFF;
  --color-focus:        var(--color-primary-500);

  /* ---- Tipografia (Manrope, 400/600) -------------------------------- */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs:  .75rem;
  --text-sm:  .875rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --weight-normal:   400;
  --weight-semibold: 600;

  /* ---- Raios ------------------------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* ---- Sombras (tom quente, suaves) -------------------------------- */
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, .06);
  --shadow-md: 0 4px 16px rgba(28, 26, 23, .10);
  --shadow-lg: 0 12px 32px rgba(28, 26, 23, .16);

  /* ---- Espaçamento (base 4px) -------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* ---- Movimento --------------------------------------------------- */
  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ---- Base: aplica a tipografia e o fundo quente da marca ----------- */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-ink);
}

/* Foco visível e consistente em tudo que é interativo (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}