/*
  tokens.css
  Variables globales. Personaliza aqui la identidad visual antes de tocar clases.
*/

:root {
  color-scheme: light;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Breakpoints documentados */
  --bp-xs: 20rem;      /* 320px */
  --bp-sm: 30rem;      /* 480px */
  --bp-sm-2: 37.5rem;  /* 600px */
  --bp-md: 48rem;      /* 768px */
  --bp-md-2: 56.25rem; /* 900px */
  --bp-lg: 64rem;      /* 1024px */
  --bp-xl: 80rem;      /* 1280px */
  --bp-2xl: 90rem;     /* 1440px */
  --bp-3xl: 100rem;    /* 1600px */
  --bp-ultra: 120rem;  /* 1920px */
  --bp-2k: 160rem;     /* 2560px */
  --bp-4k: 240rem;     /* 3840px */

  /* Colores base */
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-strong: #edf2f7;
  --color-text: #172033;
  --color-muted: #5d6b82;
  --color-line: #d8dee9;
  --color-primary: #0f766e;
  --color-primary-strong: #0b5f59;
  --color-primary-soft: #dff4ef;
  --color-primary-contrast: #ffffff;
  --color-accent: #b45309;
  --color-accent-soft: #fff4df;
  --color-danger: #b42318;
  --color-success: #067647;

  /* Containers con limites sanos para desktop, 2K y 4K */
  --container-xs: 34rem;
  --container-sm: 42rem;
  --container-md: 54rem;
  --container-lg: 72rem;
  --container-xl: 86rem;
  --container-2xl: 100rem;
  --container-ultra: 118rem;
  --container-current: var(--container-lg);
  --container-pad: clamp(0.875rem, 2.5vw, 2rem);

  /* Espaciado fluido con techo */
  --space-0: 0;
  --space-1: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
  --space-2: clamp(0.5rem, 0.44rem + 0.3vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.66rem + 0.45vw, 1rem);
  --space-4: clamp(1rem, 0.88rem + 0.6vw, 1.5rem);
  --space-5: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
  --space-6: clamp(2rem, 1.6rem + 2vw, 4rem);
  --space-7: clamp(3rem, 2.2rem + 3.2vw, 6rem);
  --space-8: clamp(4rem, 2.8rem + 4vw, 8rem);
  --space-9: clamp(5rem, 3.4rem + 5vw, 10rem);

  --gutter: var(--space-4);
  --section-space: clamp(3rem, 6.5vw, 7rem);

  /* Tipografia fluida, capada para pantallas enormes */
  --fs--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-0: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);
  --fs-1: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  --fs-2: clamp(1.25rem, 1.08rem + 0.85vw, 1.75rem);
  --fs-3: clamp(1.5rem, 1.22rem + 1.4vw, 2.375rem);
  --fs-4: clamp(2rem, 1.5rem + 2.35vw, 3.375rem);
  --fs-5: clamp(2.35rem, 1.65rem + 3.35vw, 4.75rem);
  --fs-display: clamp(2.75rem, 1.8rem + 4.4vw, 5.75rem);

  --leading-tight: 1.1;
  --leading-base: 1.55;
  --leading-loose: 1.75;

  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --line: 1px solid var(--color-line);

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
  --shadow-md: 0 8px 24px rgb(15 23 42 / 0.1);
  --shadow-lg: 0 18px 42px rgb(15 23 42 / 0.12);

  --focus-ring: 0 0 0 3px rgb(15 118 110 / 0.22);
  --z-nav: 20;
}