/* BateríaSolares — Design tokens (extraídos de docs/frontend/tokens/) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;1,700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap");

:root {
  /* ---- Fuentes ---- */
  --font-heading: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Open Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Colores de marca ---- */
  --orange-50:  #fff6e9;
  --orange-100: #ffe7c2;
  --orange-300: #ffc066;
  --orange-500: #ff910a;
  --orange-600: #e87f00;
  --orange-700: #c96d00;

  --gold-500: #ff8c02;

  --yellow-400: #ffdd31;
  --yellow-500: #ffce00;
  --yellow-600: #f0bc00;

  --navy-900: #0d3153;
  --navy-800: #123c63;
  --blue-700: #004d8c;
  --blue-500: #2d5bd0;
  --blue-400: #319af7;

  --green-600: #1aa53b;
  --green-500: #77c938;

  --red-500: #e8730c;
  --red-600: #d23f3f;

  --white:    #ffffff;
  --gray-50:  #f7f8f9;
  --gray-100: #f1f2f4;
  --gray-200: #e4e7eb;
  --gray-300: #cfd4da;
  --gray-400: #9aa1ab;
  --gray-600: #5c6470;
  --gray-800: #2b3037;
  --gray-900: #1a1d22;
  --black:    #000000;

  /* ---- Alias semánticos ---- */
  --color-primary:        var(--orange-500);
  --color-primary-hover:  var(--orange-600);
  --color-primary-press:  var(--orange-700);
  --color-cta:            var(--yellow-400);
  --color-cta-hover:      var(--yellow-500);
  --color-cta-press:      var(--yellow-600);
  --color-cta-text:       var(--navy-900);

  --text-heading:   var(--gray-900);
  --text-body:      var(--gray-800);
  --text-muted:     var(--gray-600);
  --text-faint:     var(--gray-400);
  --text-link:      var(--blue-500);
  --text-on-dark:   var(--white);
  --text-savings:   var(--green-600);

  --surface-page:   var(--white);
  --surface-card:   var(--white);
  --surface-wash:   var(--gray-50);
  --surface-muted:  var(--gray-100);
  --surface-header: var(--navy-900);
  --surface-pros:   var(--blue-700);

  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-accent:  var(--orange-500);

  --icon-pro:  var(--green-500);
  --icon-con:  var(--red-500);
  --icon-star: var(--gold-500);

  /* ---- Radios ---- */
  --radius-none:   0;
  --radius-sm:     3px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---- Sombras ---- */
  --shadow-xs: 0 1px 2px rgba(13, 49, 83, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 49, 83, 0.10);
  --shadow-md: 0 4px 12px rgba(13, 49, 83, 0.10);
  --shadow-lg: 0 8px 28px rgba(13, 49, 83, 0.14);
  --shadow-cta: 0 2px 0 var(--yellow-600);

  --ring: 0 0 0 3px rgba(255, 145, 10, 0.35);

  /* ---- Movimiento ---- */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;

  /* ---- Espaciado (base 8px) ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Layout ---- */
  --content-max: 760px;
  --page-max:    1100px;
  --gutter:      var(--space-5);

  /* ---- Tipografía ---- */
  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;
  --fw-black:   800;

  --fs-display: 2.5rem;
  --fs-h1:      2rem;
  --fs-h2:      1.5rem;
  --fs-h3:      1.25rem;
  --fs-lg:      1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  --ls-tight: -0.01em;
  --ls-wide:   0.04em;
}