:root {
  /* ─── Color: superficies (capas) ──────────────────────────────── */
  --bg:        #F4EFE6;
  --bg-deep:   #ECE4D2;
  --surface:   #FFFCF7;

  /* ─── Color: tinta y texto ────────────────────────────────────── */
  --ink:       #1F2A22;
  --ink-mute:  #5C6B5F;
  --ink-faint: #6B7A6E;

  /* ─── Color: líneas y bordes ──────────────────────────────────── */
  --line-soft: #D7CFBC;
  --line:      #B8B0A0;

  /* ─── Color: acento (verde bosque = identidad) ────────────────── */
  --accent:        #2F6B4A;
  --accent-hover:  #255939;
  --accent-active: #1C4530;
  --accent-soft:   #E5EFE8;

  /* ─── Color: acento secundario (terracota = calidez) ──────────── */
  --accent-2:        #B8743A;
  --accent-2-hover:  #9F6230;
  --accent-2-soft:   #F2E4D3;

  /* ─── Color: estado (solo errores de formulario) ────────────── */
  --danger: #B33A1F;

  /* ─── Tipografía: familias ────────────────────────────────────── */
  --font-display: 'Fraunces', 'Iowan Old Style', georgia, serif;
  --font-body:    'Inter', -apple-system, blinkmacsystemfont, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', monospace;

  /* ─── Tipografía: escala (fluida con clamp) ─────────────────────── */
  --text-xs:   clamp(11px, 1.2vw, 12px);
  --text-sm:   clamp(12.5px, 1.3vw, 13.5px);
  --text-base: clamp(14px, 1.5vw, 15px);
  --text-md:   clamp(16px, 1.7vw, 17px);
  --text-lg:   clamp(18px, 2vw, 20px);
  --text-xl:   clamp(20px, 2.4vw, 24px);
  --text-2xl:  clamp(28px, 3.2vw, 32px);
  --text-3xl:  clamp(36px, 4vw, 40px);
  --text-4xl:  clamp(48px, 5.6vw, 56px);
  --text-hero: clamp(46px, 15vw, 66px);

  /* ─── Tipografía: pesos ───────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ─── Tipografía: line-height y tracking ──────────────────────── */
  --leading-tight: 1.02;
  --leading-snug:  1.15;
  --leading-body:  1.6;
  --tracking-display: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-wide:    0.10em;

  /* ─── Espaciado (escala 4px) ──────────────────────────────────── */
  --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;

  /* ─── Espaciado: secciones (mobile-first) ─────────────────────── */
  --section-y: 40px;
  --pad-x:     20px;

  /* ─── Radio (esquinas) ────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* ─── Sombras (3 niveles) ─────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgb(31 42 34 / 6%);
  --shadow-md: 0 8px 24px -10px rgb(31 42 34 / 18%);
  --shadow-lg: 0 22px 48px -18px rgb(31 42 34 / 35%);
  --shadow-accent: 0 8px 20px -4px rgb(47 107 74 / 45%);
  --shadow-tape:   0 18px 40px -14px rgb(31 42 34 / 35%);

  /* ─── Anillo de focus (accesibilidad) ─────────────────────────── */
  --focus-ring: 0 0 0 2px var(--accent-2);
  --focus-offset: 3px;

  /* ─── Motion (curvas y duraciones) ────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base:  cubic-bezier(0.2, 0, 0, 1);
  --motion-fast:  150ms;
  --motion-base:  220ms;
  --motion-slow:  650ms;

  /* ─── Layout (mobile-first) ───────────────────────────────────── */
  --container-max: 100%;
  --container-gutter: 20px;

  /* ─── Breakpoints (mobile-first, content-based) ───────────────── */
  --bp-tablet: 600px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* ─── Z-index (escala explícita) ──────────────────────────────── */
  --z-base:    1;
  --z-sticky:  45;
  --z-dock:    50;
  --z-menu:    55;
  --z-toggle:  60;
  --z-modal:   65;
  --z-skip:    1000;

  /* ─── Color: sobre fondo oscuro (footer) ──────────────────────── */
  --ink-inverse:     #E9E3D6;
  --ink-muted-dark:  #C9C6B8;
  --ink-faint-dark:  #9C9A8C;

  /* ─── Gradientes placeholder (propiedades) ────────────────────── */
  --grad-a: linear-gradient(160deg, #D8C49C 0%, #8E6A41 100%);
  --grad-b: linear-gradient(160deg, #C8B89A 0%, #6F563B 100%);
  --grad-c: linear-gradient(160deg, #E0CDB0 0%, #A98358 100%);

  /* ─── Sombras adicionales ─────────────────────────────────────── */
  --shadow-app:      0 0 90px -24px rgb(31 42 34 / 35%);
  --shadow-dock:     0 14px 34px -10px rgb(31 42 34 / 55%);
  --shadow-accent-sm: 0 6px 14px -4px rgb(47 107 74 / 50%);
}

/* ─── Tablet (≥ 600px) ───────────────────────────────────────────── */
@media (width >= 600px) {
  :root {
    --container-max: 100%;
    --container-gutter: 32px;
    --section-y: 64px;
    --pad-x: 40px;
  }
}

/* ─── Desktop (≥ 1024px) ─────────────────────────────────────────── */
@media (width >= 1024px) {
  :root {
    --container-max: 1280px;
    --container-gutter: 48px;
    --section-y: 80px;
    --pad-x: 56px;
  }
}

/* ─── Wide (≥ 1440px) ────────────────────────────────────────────── */
@media (width >= 1440px) {
  :root {
    --container-max: 1600px;
    --pad-x: 80px;
  }
}

/* ─── Ultra-wide (≥ 1920px) ──────────────────────────────────────── */
@media (width >= 1920px) {
  :root {
    --container-max: 1800px;
    --pad-x: 96px;
  }
}