/* ============================================================
   Lowi Design System · tokens (colors, type, spacing, base)
   Self-contained for static hosting. Fonts loaded via <link> in HTML head.
   ============================================================ */
:root {
  /* ---- Brand red ---- */
  --red-500: #E60000;
  --red-600: #C20000;
  --red-700: #9E0000;
  --red-100: #FFE3E3;
  --red-050: #FFF1F1;

  /* ---- Ink / near-black ---- */
  --black-900: #0D0D0D;
  --black-800: #1A1A1A;
  --black-700: #2B2B2B;

  /* ---- Neutral scale ---- */
  --neutral-900: #1A1A1A;
  --neutral-700: #4A4A4A;
  --neutral-500: #767676;
  --neutral-400: #9A9A9A;
  --neutral-300: #C9C9C9;
  --neutral-200: #E4E4E4;
  --neutral-100: #F1F1F1;
  --neutral-050: #F8F8F8;
  --white: #FFFFFF;

  /* ---- Support hues ---- */
  --green-success: #1F8A4C;
  --green-soft: #A8B89E;
  --yellow-soft: #E8E1A0;
  --blue-info: #1565C0;
  --amber-warning: #C77700;

  /* ---- Semantic aliases ---- */
  --color-brand: var(--red-500);
  --color-brand-hover: var(--red-600);
  --color-brand-press: var(--red-700);
  --color-accent-dot: var(--red-500);

  --text-primary: var(--black-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--white);
  --text-brand: var(--red-500);
  --text-on-dark: var(--white);

  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-muted: var(--neutral-050);
  --surface-tint: var(--red-050);
  --surface-dark: var(--black-900);
  --surface-brand: var(--red-500);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-900);
  --focus-ring: var(--red-500);

  /* ---- Type ---- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: 4rem;
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.375rem;
  --fs-lg: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-caps: 0.08em;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --radius-blob: 50% 50% 48% 52% / 55% 48% 52% 45%;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(13,13,13,0.06);
  --shadow-md: 0 6px 18px rgba(13,13,13,0.08);
  --shadow-lg: 0 14px 40px rgba(13,13,13,0.12);
  --shadow-red: 0 10px 28px rgba(230,0,0,0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ---- Base reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

strong, b { font-weight: var(--fw-bold); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Signature red dot ("ese punto de más") */
.lowi-dot::after {
  content: "";
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--color-accent-dot);
  vertical-align: baseline;
}