/* ============================================================
   Roiar — tokens.css
   Paleta "Data-Driven Investor" (doc. seção 3) + escalas de design
   ============================================================ */
:root {
  /* Cores da marca */
  --bg: #F8F9FE;
  --navy: #0F172A;
  --teal: #0291AD;
  --green: #22C55E;
  --title: #1E293B;
  --body: #64748B;

  /* Derivadas */
  --navy-800: #1E293B;
  --teal-dark: #03718A;
  --teal-light: #3EC1DE;   /* acento teal sobre fundos escuros */
  --teal-soft: #E3F4F8;
  --green-dark: #16A34A;
  --green-soft: #E9F9EF;

  /* Superfícies e bordas */
  --surface: #FFFFFF;
  --surface-alt: #F1F4FA;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  /* Semânticas */
  --danger: #DC2626;      --danger-soft: #FDECEC;
  --warning: #B45309;     --warning-soft: #FEF3C7;
  --greyed: #E2E8F0;      --greyed-text: #94A3B8;   /* estado "greyed out" */

  /* Tipografia */
  --font: 'Eastman Roman', Georgia, 'Times New Roman', serif;

  /* Tamanhos de texto */
  --text-xs: .75rem;  --text-sm: .875rem; --text-md: 1rem;   --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem;

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

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 4px 14px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.16);

  /* Camadas */
  --z-navbar: 100; --z-dropdown: 110; --z-modal: 200; --z-toast: 300;

  --navbar-h: 72px;
}