/* ============================================
   TOKENS — Sistema de diseño
   calculadorainversion.com
   ============================================ */

:root {

  /* --- Colores principales --- */
  --green:              #1D9E75;
  --green-hover:        #178a65;
  --green-light:        #E1F5EE;
  --green-text:         #085041;

  /* --- Escala de grises --- */
  --white:              #ffffff;
  --gray-50:            #f8f7f5;
  --gray-100:           #f0eeeb;
  --gray-200:           #e4e2de;
  --gray-300:           #cccac5;
  --gray-500:           #8a8880;
  --gray-700:           #4a4a48;
  --gray-900:           #1a1a18;

  /* --- Colores semánticos (usos concretos) --- */
  --color-bg:           var(--white);
  --color-bg-soft:      var(--gray-50);
  --color-bg-card:      var(--white);
  --color-border:       var(--gray-200);
  --color-border-soft:  var(--gray-100);
  --color-text:         var(--gray-900);
  --color-text-muted:   var(--gray-500);
  --color-text-soft:    var(--gray-700);
  --color-accent:       var(--green);
  --color-accent-hover: var(--green-hover);

  /* --- Tipografía --- */
  --font-sans:          'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:            0.75rem;    /* 12px */
  --text-sm:            0.875rem;   /* 14px */
  --text-base:          1rem;       /* 16px */
  --text-lg:            1.125rem;   /* 18px */
  --text-xl:            1.25rem;    /* 20px */
  --text-2xl:           1.5rem;     /* 24px */
  --text-3xl:           2rem;       /* 32px */
  --text-4xl:           2.5rem;     /* 40px */

  --weight-normal:      400;
  --weight-medium:      500;
  --weight-bold:        600;

  --leading:            1.7;
  --leading-tight:      1.2;

  /* --- Espaciado --- */
  --s-1:   0.25rem;   /* 4px  */
  --s-2:   0.5rem;    /* 8px  */
  --s-3:   0.75rem;   /* 12px */
  --s-4:   1rem;      /* 16px */
  --s-5:   1.25rem;   /* 20px */
  --s-6:   1.5rem;    /* 24px */
  --s-8:   2rem;      /* 32px */
  --s-10:  2.5rem;    /* 40px */
  --s-12:  3rem;      /* 48px */
  --s-16:  4rem;      /* 64px */
  --s-20:  5rem;      /* 80px */

  /* --- Layout --- */
  /* Nota: wide debe ser SIEMPRE mayor que el ancho base */
  --max-width:          1024px;
  --max-width-wide:     1200px;
  --radius-sm:          6px;
  --radius:             10px;
  --radius-lg:          16px;
  --radius-xl:          24px;

  /* --- Sombras --- */
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.06);
  --shadow:             0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:          0 4px 20px rgba(0,0,0,0.10);

  /* --- Transiciones --- */
  --transition:         300ms ease;

}

/* --- Dark mode automático --- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #141412;
    --color-bg-soft:      #1c1c1a;
    --color-bg-card:      #1f1f1d;
    --color-border:       #2e2e2b;
    --color-border-soft:  #252523;
    --color-text:         #f0eeeb;
    --color-text-muted:   #888882;
    --color-text-soft:    #b8b5b0;
    --green-light:        #0a2e22;
    --green-text:         #5DCAA5;
  }
}