/* ============================================================
   TOKENS - Variaveis de design
   Familia Rioski
   ============================================================ */

:root {
  /* Cores principais */
  --azul-900: #0F1F4A;
  --azul-800: #1E3A8A;
  --azul-700: #1E40AF;
  --azul-600: #2563EB;
  --azul-500: #3B82F6;
  --azul-100: #DBEAFE;
  --azul-50:  #EFF6FF;

  --laranja-700: #C45D00;
  --laranja-600: #E56A00;
  --laranja-500: #FF7500;
  --laranja-100: #FFEDD5;
  --laranja-50:  #FFF7ED;

  /* Cinzas */
  --branco:     #FFFFFF;
  --gelo:       #F9FAFB;
  --cinza-50:   #F3F4F6;
  --cinza-100:  #E5E7EB;
  --cinza-200:  #D1D5DB;
  --cinza-300:  #9CA3AF;
  --cinza-500:  #6B7280;
  --cinza-700:  #374151;
  --cinza-900:  #111827;

  /* Semanticos */
  --primaria:    var(--azul-800);
  --primaria-h:  var(--azul-900);
  --acento:      var(--laranja-500);
  --acento-h:    var(--laranja-600);
  --sucesso:     #10B981;
  --aviso:       #F59E0B;
  --erro:        #EF4444;
  --info:        var(--azul-600);

  /* Texto */
  --texto:           var(--cinza-900);
  --texto-suave:     var(--cinza-500);
  --texto-claro:     var(--cinza-300);
  --texto-inverso:   #FFFFFF;

  /* Fundo */
  --bg:           #FFFFFF;
  --bg-suave:     var(--gelo);
  --bg-card:      #FFFFFF;
  --bg-hover:     var(--cinza-50);

  /* Bordas */
  --borda:        var(--cinza-100);
  --borda-forte:  var(--cinza-200);

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

  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --sombra-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --sombra-lg: 0 12px 30px rgba(15, 23, 42, 0.12);

  /* Espacamentos */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-10: 40px;
  --gap-12: 48px;

  /* Tipografia */
  --fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto-xs: 12px;
  --texto-sm: 13px;
  --texto-md: 14px;
  --texto-base: 15px;
  --texto-lg: 17px;
  --texto-xl: 20px;
  --texto-2xl: 24px;
  --texto-3xl: 30px;

  /* Layout */
  --sidebar-w: 250px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;

  /* Transicoes */
  --t-rapida: 120ms ease;
  --t-media:  200ms ease;
}