/* ==========================================================================
   ROUTE PLANNER — DESIGN TOKENS
   --------------------------------------------------------------------------
   Todas as variáveis de design do projeto (cores, tipografia, espaçamentos,
   raios, sombras). Em Vue, exponha estes tokens globalmente (ex.: importe este
   arquivo uma única vez em main.js / App.vue) — NÃO replique por componente.

   Fontes: a marca pede Google Sans (proprietária); Figtree é carregada como
   substituta livre mais próxima para display, e Manrope para corpo/UI.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Marca · núcleo ---- */
  --rp-navy:        #011B3F;  /* navy profundo — tinta primária, superfícies escuras */
  --rp-navy-700:    #0A2A5C;  /* navy elevado                                         */
  --rp-blue:        #0044CA;  /* azul de marca — ações, links, destaque               */
  --rp-blue-hover:  #0038A8;  /* azul pressionado / hover                             */
  --rp-blue-600:    #1E5BE0;
  --rp-blue-400:    #4073D7;  /* azul secundário                                      */
  --rp-blue-200:    #9CB6EC;  /* tom azul, bordas sobre azul                          */
  --rp-blue-100:    #D7E2F8;  /* preenchimento azul suave                             */
  --rp-blue-50:     #EEF3FD;  /* lavagem azul tênue, linhas em hover                  */

  /* ---- Neutros ---- */
  --rp-white:       #FFFFFF;
  --rp-gray-50:     #F6F8FB;  /* canvas do app / fundo de seção                       */
  --rp-gray-100:    #EDF1F6;
  --rp-gray-200:    #DFE5EC;  /* bordas hairline                                      */
  --rp-gray-300:    #C5CFDB;
  --rp-gray-400:    #9AA7B8;  /* desabilitado, ícones tênues                          */
  --rp-gray-500:    #6B7A8F;  /* texto secundário                                     */
  --rp-gray-700:    #3C4A5C;  /* texto de corpo sobre claro                           */

  /* ---- Status semântico ---- */
  --rp-success:     #18935A;
  --rp-success-bg:  #E4F4EC;
  --rp-warning:     #C77A12;
  --rp-warning-bg:  #FBF0DE;
  --rp-danger:      #C8362F;
  --rp-danger-bg:   #FBE7E6;

  /* ---- Papéis de primeiro/segundo plano ---- */
  --fg1: var(--rp-navy);      /* texto primário        */
  --fg2: var(--rp-gray-700);  /* texto de corpo        */
  --fg3: var(--rp-gray-500);  /* secundário / legendas */
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-2: #B7C4D6;
  --bg1: var(--rp-white);     /* superfície base       */
  --bg2: var(--rp-gray-50);   /* canvas recuado        */
  --bg-dark: var(--rp-navy);

  /* ---- Famílias tipográficas ---- */
  --font-display: 'Google Sans', 'Product Sans', 'Figtree', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Raios ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Escala de espaçamento (base 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; --s-20: 80px; --s-24: 96px;

  /* ---- Elevação (sombras com tom navy) ---- */
  --shadow-sm: 0 1px 2px rgba(1, 27, 63, 0.06), 0 1px 1px rgba(1, 27, 63, 0.04);
  --shadow-md: 0 4px 14px rgba(1, 27, 63, 0.08), 0 2px 4px rgba(1, 27, 63, 0.04);
  --shadow-lg: 0 12px 32px rgba(1, 27, 63, 0.12), 0 4px 8px rgba(1, 27, 63, 0.05);
  --shadow-blue: 0 8px 22px rgba(0, 68, 202, 0.28);

  /* ---- Papéis de superfície (tema claro) ---- */
  --bg: var(--rp-white);
  --bg-2: var(--rp-gray-50);
  --bg-3: var(--rp-gray-100);
  --surface: var(--rp-white);

  /* ---- Vidro (glassmorphism sobre foto) ---- */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-2: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(1, 27, 63, 0.10);
  --glass-border-strong: rgba(1, 27, 63, 0.16);
  --hair: var(--rp-gray-200);
  --blur: 12px;

  /* ---- Tipografia: papéis ---- */
  --ink: var(--rp-navy);          /* títulos */
  --body: var(--rp-gray-700);     /* corpo   */
  --muted: var(--rp-gray-500);    /* apoio   */

  /* ---- Identidade de marca: apelidos ---- */
  --navy: var(--rp-navy);
  --blue: var(--rp-blue);
  --blue-bright: var(--rp-blue-600);
  --blue-deep: var(--rp-blue-hover);
  --blue-soft: var(--rp-blue-50);

  /* ---- Destaque (10%) ---- */
  --accent: var(--rp-blue);
  --accent-2: var(--rp-blue-600);
  --accent-soft: rgba(0, 68, 202, 0.10);
  --accent-line: rgba(0, 68, 202, 0.30);
  --glow-accent: 0 8px 22px rgba(0, 68, 202, 0.28);

  /* ---- Suporte (apelidos semânticos) ---- */
  --success: var(--rp-success);
  --success-soft: var(--rp-success-bg);
  --error: var(--rp-danger);
  --error-soft: var(--rp-danger-bg);

  /* ---- Elevação: apelidos usados nos blocos ---- */
  --shadow: 0 12px 32px rgba(1, 27, 63, 0.12), 0 4px 8px rgba(1, 27, 63, 0.05);
  --shadow-float: 0 4px 14px rgba(1, 27, 63, 0.10), 0 2px 4px rgba(1, 27, 63, 0.05);
  --shadow-card: 0 4px 14px rgba(1, 27, 63, 0.08), 0 2px 4px rgba(1, 27, 63, 0.04);

  /* ---- Layout ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 60px);
  --header-h: 76px;
}