/*
 * Design tokens — LegalizaTuPredio (Fase 6 del proyecto)
 * Fuente de verdad de color, tipografía, espaciado, radios, sombras y movimiento.
 * No declares colores o tamaños "a mano" en otros archivos: usa estas variables.
 */

:root{
  /* ===== Color ===== */
  --color-black:#111111;
  --color-white:#FFFFFF;
  --color-cream:#FAF9F3;
  --color-yellow:#F5C518;
  --color-yellow-dark:#C9A600;
  --grey-100:#F5F5F3;
  --grey-200:#E8E8E5;
  --grey-400:#B9B9B4;
  --grey-600:#6B6B66;
  --grey-900:#2A2A28;

  --bg-primary:var(--color-white);
  --bg-secondary:var(--color-cream);
  --bg-inverse:var(--color-black);
  --text-primary:var(--color-black);
  --text-secondary:var(--grey-600);
  --text-inverse:var(--color-white);
  --border-subtle:var(--grey-200);
  --accent:var(--color-yellow);
  --accent-strong:var(--color-yellow-dark);

  /* ===== Tipografía ===== */
  --font-display:"Bebas Neue", sans-serif;
  --font-body:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-lg:18px;
  --text-xl:20px;
  --text-2xl:24px;
  --text-3xl:32px;
  --text-4xl:40px;
  --text-5xl:56px;

  /* ===== Espaciado (base 4px) ===== */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;
  --space-24:96px;

  /* ===== Radios ===== */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-full:999px;

  /* ===== Elevación ===== */
  --shadow-1:0 1px 2px rgba(17,17,17,0.04), 0 1px 1px rgba(17,17,17,0.03);
  --shadow-2:0 4px 10px rgba(17,17,17,0.06), 0 1px 2px rgba(17,17,17,0.04);
  --shadow-3:0 12px 28px rgba(17,17,17,0.09), 0 2px 6px rgba(17,17,17,0.05);

  /* ===== Movimiento ===== */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --duration-slow:320ms;

  /* ===== Breakpoints de referencia (usados en media queries de otros archivos) ===== */
  --bp-tablet:640px;
  --bp-desktop:1024px;
  --bp-wide:1440px;
}