/* =============================================
   Design Tokens — Energía Simple
   Single source of truth for all design values
   ============================================= */

:root {
  /* Brand — Amber */
  --amber-50:  #fdf6ea;
  --amber-100: #f9e6c4;
  --amber-400: #edac55;
  --amber-500: #e09f42;
  --amber-600: #c9892f;

  /* Brand — Teal */
  --teal-900:  #1f292d;
  --teal-800:  #2d3b41;
  --teal-700:  #3c4e55;
  --teal-600:  #51666e;
  --teal-100:  #e7ecee;

  /* Neutrals */
  --paper:     #fafbfc;
  --surface:   #ffffff;
  --surface-2: #f4f6f7;
  --border:    #e3e7ea;
  --ink:       #1a2226;
  --muted:     #5d6b73;

  /* Semantic colors */
  --success:      #2f7d57;
  --success-soft: #e7f4ec;
  --warning:      #b07a1e;
  --warning-soft: #fbf1dd;
  --danger:       #c0392b;
  --danger-soft:  #fdecea;
  --info:         #2d6a7e;
  --info-soft:    #e6f1f4;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Border radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 30, 40, .05);
  --shadow-md: 0 4px 12px rgba(20, 30, 40, .08);
  --shadow-lg: 0 12px 32px rgba(20, 30, 40, .16);

  /* Typography */
  --font-base:    'Epilogue', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Syne', 'Epilogue', system-ui, sans-serif;
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: .95rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.4rem;

  /* Legacy aliases — keep for backward compat during migration */
  --amber:    var(--amber-400);
  --amber-d:  var(--amber-600);
  --teal:     var(--teal-800);
  --teal-d:   var(--teal-900);
  --teal-l:   var(--teal-700);
  --paper-2:  var(--surface-2);
}