/* =====================================================================
   Dr. Fábio Rueda 4444 — Design tokens
   Mesma estrutura do ELO Design System, com a paleta da marca Rueda.
   ===================================================================== */

@font-face{font-family:'Inter';src:url('fonts/inter.18pt-light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter.18pt.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter.24pt-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter.18pt-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter.18pt-extrabold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter.18pt-black.ttf') format('truetype');font-weight:900;font-display:swap}

:root{
  /* --- Marca: azul profundo, ciano, amarelo (da arte de campanha) --- */
  --blue-950:#07234F;
  --blue-900:#0C2F68;
  --blue-800:#123C85;
  --blue-700:#17499E;
  --blue-600:#1E5FC4;
  --blue-300:#7FC4EC;
  --blue-50:#EEF5FC;

  --cyan:#29ABE2;
  --cyan-600:#1E93C6;
  --cyan-300:#6FCAEE;

  --yellow:#FBBA00;
  --yellow-600:#E0A600;
  --yellow-100:#FFF1CC;

  --brand:var(--cyan);
  --brand-hover:var(--cyan-600);
  --accent:var(--yellow);

  /* Superfícies */
  --canvas:#FFFFFF;
  --canvas-alt:var(--blue-50);
  --surface:#FFFFFF;
  --surface-dark:var(--blue-900);

  /* Tinta */
  --ink1:#0B1F3F;
  --ink2:#3C5578;
  --ink3:#70859F;
  --fg1:#FFFFFF;
  --fg2:rgba(255,255,255,.82);
  --fg3:rgba(255,255,255,.62);

  --line-on-light:rgba(11,31,63,.12);
  --line-on-dark:rgba(255,255,255,.16);

  /* Tipografia */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Espaçamento — grade de 8px */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:88px;--space-10:120px;

  /* Raios */
  --radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;
  --radius-tile:24px;--radius-pill:999px;

  /* Sombras */
  --shadow-sm:0 2px 8px rgba(7,35,79,.07);
  --shadow-md:0 10px 30px rgba(7,35,79,.11);
  --shadow-lg:0 26px 64px rgba(7,35,79,.20);
  --shadow-cyan:0 14px 36px rgba(41,171,226,.38);
  --shadow-yellow:0 14px 36px rgba(251,186,0,.34);

  /* Gradientes */
  --grad-brand:linear-gradient(135deg,var(--cyan) 0%,var(--blue-600) 100%);
  --grad-deep:linear-gradient(165deg,var(--blue-800) 0%,var(--blue-950) 100%);
  --grad-yellow:linear-gradient(135deg,var(--yellow) 0%,var(--yellow-600) 100%);

  /* Scrims sobre fotografia */
  --scrim-bottom:linear-gradient(180deg,rgba(7,35,79,.15) 0%,rgba(7,35,79,.86) 100%);
  --scrim-left:linear-gradient(90deg,rgba(7,35,79,.92) 0%,rgba(7,35,79,.55) 55%,rgba(7,35,79,.25) 100%);

  /* Movimento */
  --dur-fast:140ms;--dur:260ms;--dur-slow:520ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --focus-ring:rgba(41,171,226,.4);
}