/* ============================================================
   variables.css — Tokens de design do sistema
   Paleta teal/roxo (marca Janine Pinheiro)
   ============================================================ */

:root {
  /* Cores principais — mapeadas para teal (mantém nomes --sage* para compatibilidade) */
  --sage:    #2A9D8F;   /* teal principal */
  --sage-d:  #1D6B60;   /* teal escuro */
  --sage-l:  #E0F5F3;   /* teal claro */
  --sage-xl: #F0FAF9;   /* teal fantasma */

  /* Roxo (cor secundária da marca) */
  --roxo:    #6B3FA0;
  --roxo-d:  #4A2670;
  --roxo-l:  #F0E8FA;
  --roxo-xl: #F8F3FE;

  /* Neutros */
  --cream:   #F4FAF9;
  --stone:   #1A3A35;
  --muted:   #5A8A83;
  --border:  #C8E8E4;
  --border-l:#DDF0ED;
  --white:   #FFFFFF;

  /* Feedback */
  --error:   #C0524A;
  --error-l: #FAE8E6;
  --success: #1D7A5A;
  --success-l:#D6F0E5;
  --warn:    #E09B2D;
  --warn-l:  #FBF0DC;

  /* Layout */
  --nav-h:    64px;
  --sidebar-w: 220px;
  --shadow:   0 2px 16px rgba(30, 80, 70, .08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .18);

  /* Tipografia */
  --font-sans:  'DM Sans', sans-serif;
  --font-serif: 'Lora', serif;

  /* Border radius */
  --radius-sm: 6px;
  --radius:    9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Transições */
  --transition: .18s ease;
}