/* Legato Capital — Design tokens (Design System §24) */
:root {
  /* Paleta principal */
  --color-charcoal: #1A1A1A;
  --color-stone: #6B6B66;
  --color-sand: #D7C9B7;
  --color-olive: #687A58;
  --color-bone: #F8F6F1;
  --color-white: #FFFFFF;

  /* Complementarios */
  --color-warm-gray: #A8A39A;
  --color-light-stone: #E7E2DA;
  --color-dark-olive: #4F6045;
  --color-soft-sand: #EEE7DE;
  --color-success: #60765A;
  --color-error: #A35D52;

  /* Roles semánticos */
  --bg-page: var(--color-bone);
  --bg-surface: var(--color-white);
  --bg-soft: var(--color-soft-sand);
  --bg-inverse: var(--color-charcoal);
  --text-primary: var(--color-charcoal);
  --text-secondary: var(--color-stone);
  /* El stone del brandbook pasa AA sobre hueso y blanco (4.9 / 5.3) pero se queda
     en 4.37 sobre arena suave; estos dos tonos lo cubren sin tocar la paleta. */
  --text-on-soft: #5A5A55;
  --text-on-sand: #4A4843;
  --text-inverse: var(--color-white);
  --border-default: var(--color-light-stone);
  /* Olivo como acción principal (decisión de marca sobre el §12, que proponía
     carbón). El olivo #687A58 con texto blanco da 3.8:1 y no alcanza el 4.5 del
     §23, así que toda superficie olivo con texto usa el olivo oscuro (6.8:1);
     el olivo claro queda para iconos, bordes y acentos gráficos, donde basta 3:1. */
  --action-primary: var(--color-dark-olive);
  --action-primary-hover: #3E4C36;
  --action-neutral: var(--color-charcoal);
  --action-neutral-hover: #303030;
  --action-accent: var(--color-dark-olive);
  --action-accent-hover: #3E4C36;
  --accent-line: var(--color-olive);
  --focus-ring: var(--color-olive);
  --focus-halo: rgba(104, 122, 88, .10);

  /* Etiquetas de categoría. Tonos apagados dentro de la paleta; todos los pares
     fondo/texto verificados por encima de 4.5:1 para texto de 11 px. */
  --tag-casa-bg: #E6EAE1;        --tag-casa-fg: #3F4E37;
  --tag-depto-bg: #E8E7E4;       --tag-depto-fg: #333331;
  --tag-terreno-bg: #EFE6D2;     --tag-terreno-fg: #6B5420;
  --tag-descanso-bg: #DEEAE8;    --tag-descanso-fg: #2B5A58;
  --tag-remodelar-bg: #F2E2DD;   --tag-remodelar-fg: #8A4537;
  --tag-obra-bg: #EDE8DF;        --tag-obra-fg: #5A5A55;
  --tag-anticipado-bg: #1A1A1A;  --tag-anticipado-fg: #FFFFFF;

  /* Tipografía — una sola familia (§4) */
  --font-primary: "Plus Jakarta Sans", "Inter", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica: móvil → valores de escritorio del §5 */
  --fs-display-xl: clamp(34px, 8.4vw, 64px);
  --fs-h1: clamp(32px, 6.2vw, 48px);
  --fs-h2: clamp(26px, 4.4vw, 36px);
  --fs-h3: clamp(22px, 3.2vw, 28px);
  --fs-h4: 22px;
  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;

  /* Espaciado base 8 px (§7) */
  --space-micro: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Radios (§10) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-img: 16px;
  --radius-pill: 999px;

  /* Sombras suaves (§11) */
  --shadow-sm: 0 8px 32px rgba(26, 26, 26, .06);
  --shadow-md: 0 12px 40px rgba(26, 26, 26, .10);

  /* Motion (§22) */
  --duration-micro: 120ms;
  --duration-hover: 180ms;
  --duration-card: 240ms;
  --duration-panel: 320ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Layout — mobile first (§8) */
  --container: 100%;
  --gutter: 20px;      /* mobile 20 → tablet 32 → desktop 80 */
  --header-h: 64px;    /* mobile 64 → desktop 72 */
  --bottomnav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Objetivo táctil: 44 px es el mínimo de Apple y el piso de la WCAG; 48 px es
     la recomendación de Material y lo que se siente cómodo con el pulgar. El
     icono dentro va a 24 px: a 20 px el botón cumple pero se lee pequeño. */
  --target: 44px;
  --icono: 20px;
}
@media (pointer: coarse) {
  :root { --target: 48px; --icono: 24px; }
}

/* A partir de tablet la navegación vive en el header: la barra inferior
   (patrón de app, §21) se reserva para teléfono. */
@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 68px; --bottomnav-h: 0px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --header-h: 72px; --container: 1440px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 80px; }
}