:root {
  /* Fondos y Superficies Principales */
  --cc-bg-body:        #f8fafc; /* bg-slate-50: Fondo principal de la landing */
  --cc-bg-card:        #ffffff; /* bg-white: Tarjetas bento, modales y contenedores */
  --cc-bg-subtle:      #f1f5f9; /* bg-slate-100: Badges, fondos secundarios y tablas */
  --cc-border:         #e2e8f0; /* border-slate-200: Bordes sobrios */

  /* Textos y Jerarquía */
  --cc-text-title:     #0f172a; /* text-slate-900: Títulos H1/H2, números y datos */
  --cc-text-body:      #475569; /* text-slate-600: Párrafos y descripciones */
  --cc-text-muted:     #94a3b8; /* text-slate-400: Etiquetas secundarias */

  /* Botones de Acción (CTA) */
  --cc-btn-primary:    #0f172a; /* bg-slate-900 hover:bg-slate-800 text-white */
  --cc-btn-secondary:  #ffffff; /* bg-white border border-slate-200 text-slate-800 */
  --cc-focus-ring:     #38bdf8; /* ring-sky-400: Anillo accesible de interacción */

  /* Acentos Semánticos */
  --cc-sky-accent:     #0284c7; /* text-sky-600 / bg-sky-50: Acento primario */
  --cc-emerald-income: #059669; /* text-emerald-600 / bg-emerald-50: Ingresos / Diezmos */
  --cc-amber-alert:    #d97706; /* text-amber-600 / bg-amber-50: Alertas / Salidas */
  --cc-rose-expense:   #e11d48; /* text-rose-600 / bg-rose-50: Egresos / Gastos */

  /* Modo Oscuro (Dark Theme) */
  --cc-dark-body:      #020617; /* dark:bg-slate-950 */
  --cc-dark-card:      #0f172a; /* dark:bg-slate-900 */
  --cc-dark-border:    #1e293b; /* dark:border-slate-800 */
  --cc-dark-text:      #f8fafc; /* dark:text-slate-100 */
}