/* ==========================================================
   BARAX Water Systems — Design Tokens
   Version: 1.0
   Fuente: Politica de Imagen Barax Water Systems (PDF)
   ========================================================== */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500&display=swap');

:root {

  /* ── Raw palette (Politica de Imagen §5) ── */
  --color-black:          #000000;
  --color-white:          #FFFFFF;
  --color-blue:           #0F67D0;
  --color-gray-100:       #F5F5F5;
  --color-gray-200:       #E5E5E5;
  --color-gray-300:       #D4D4D4;
  --color-gray-400:       #A3A3A3;
  --color-gray-500:       #737373;
  --color-gray-600:       #525252;
  --color-gray-700:       #404040;
  --color-gray-800:       #262626;
  --color-gray-900:       #171717;
  --color-blue-light:     #3B8AE0;
  --color-blue-dark:      #0A4F9E;

  /* ── Semantic tokens ── */
  --color-bg:             var(--color-white);
  --color-bg-dark:        var(--color-black);
  --color-bg-soft:        var(--color-gray-100);
  --color-text:           var(--color-gray-900);
  --color-text-light:     var(--color-gray-500);
  --color-text-on-dark:   var(--color-white);
  --color-accent:         var(--color-blue);
  --color-accent-hover:   var(--color-blue-light);
  --color-accent-active:  var(--color-blue-dark);
  --color-border:         var(--color-gray-200);
  --color-border-strong:  var(--color-gray-300);
  --color-border-dark:    var(--color-gray-800);
  --color-text-muted:     var(--color-gray-400);
  --color-text-faint:     var(--color-gray-600);
  --color-bg-hover:       var(--color-gray-100);

  /* ── Typography (Politica de Imagen §6) ── */
  --font-heading:         'Poppins', 'Montserrat', 'Arial Black', sans-serif;
  --font-body:            'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* ── Typographic scale ── */
  --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:             1.875rem;   /* 30px */
  --text-4xl:             2.25rem;    /* 36px */
  --text-5xl:             3rem;       /* 48px */

  /* ── Font weights ── */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* ── Line heights ── */
  --line-tight:           1.2;
  --line-normal:          1.5;
  --line-relaxed:         1.7;

  /* ── Tracking ── */
  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.02em;

  /* ── Spacing scale ── */
  --space-1:              0.25rem;    /* 4px */
  --space-2:              0.5rem;     /* 8px */
  --space-3:              0.75rem;    /* 12px */
  --space-4:              1rem;       /* 16px */
  --space-5:              1.5rem;     /* 24px */
  --space-6:              2rem;       /* 32px */
  --space-7:              2.5rem;     /* 40px */
  --space-8:              3rem;       /* 48px */
  --space-9:              4rem;       /* 64px */
  --space-10:             5rem;       /* 80px */
  --space-11:             6rem;       /* 96px */
  --space-12:             8rem;       /* 128px */

  /* ── Border radius ── */
  --radius-sm:            0.25rem;    /* 4px */
  --radius-md:            0.5rem;     /* 8px */
  --radius-lg:            0.75rem;    /* 12px */
  --radius-xl:            1rem;       /* 16px */
  --radius-full:          9999px;

  /* ── Shadows ── */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:            0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Focus (accesibilidad WCAG 2.1 AA) ── */
  --focus-ring:           2px solid var(--color-accent);
  --focus-offset:         2px;

  /* ── Container ── */
  --container-sm:         36rem;      /* 576px */
  --container-md:         48rem;      /* 768px */
  --container-lg:         72rem;      /* 1152px */
}


/* ── Reset ── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--line-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}


/* ── Layout utilities (max 10) ── */

.container {
  width: min(100% - var(--space-6), var(--container-lg));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-9);
}

.section--lg {
  padding-block: var(--space-10);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.section--soft {
  background-color: var(--color-bg-soft);
}

.text-center {
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.mx-auto {
  margin-inline: auto;
}

.max-w-md {
  max-width: var(--container-md);
}