@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Colores de marca */
  --espresso:#3B2416;
  --tueste:#6F4A2F;
  --crema:#D9C3A5;
  --leche:#F0E6D6;
  --verde-grano:#5C6B4F;
  --carbon:#2B2320;
  --espresso-dark:#2A1810;
  --tueste-light:#8A6444;
  --verde-grano-dark:#465239;
  --verde-grano-light:#748566;
  --crema-light:#EAD9BE;
  --leche-dark:#E6D8C2;
  --blanco:#FFFDF9;
  --linea:rgba(43,35,32,0.14);
  --linea-suave:rgba(43,35,32,0.08);

  --surface-page:var(--leche);
  --surface-card:var(--blanco);
  --surface-sunken:var(--leche-dark);
  --surface-inverse:var(--espresso);
  --surface-inverse-dark:var(--espresso-dark);

  --text-primary:var(--carbon);
  --text-secondary:var(--tueste);
  --text-muted:rgba(43,35,32,0.6);
  --text-on-dark:var(--leche);
  --text-on-dark-muted:rgba(240,230,214,0.7);

  --brand-primary:var(--espresso);
  --brand-primary-hover:var(--espresso-dark);
  --brand-secondary:var(--tueste);
  --brand-accent:var(--verde-grano);
  --brand-accent-hover:var(--verde-grano-dark);
  --brand-highlight:var(--crema);

  --border-default:var(--linea);
  --border-soft:var(--linea-suave);

  --success:var(--verde-grano);
  --warning:#B5793A;
  --danger:#8C3B2B;

  /* Tipografia */
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,Helvetica,Arial,sans-serif;

  --text-display:clamp(2.75rem,4vw,4.5rem);
  --text-h1:clamp(2.25rem,3vw,3.25rem);
  --text-h2:clamp(1.75rem,2.4vw,2.25rem);
  --text-h3:1.5rem;
  --text-h4:1.125rem;
  --text-body-lg:1.1875rem;
  --text-body:1rem;
  --text-small:0.875rem;
  --text-micro:0.75rem;

  --leading-tight:1.1;
  --leading-snug:1.3;
  --leading-normal:1.55;
  --leading-loose:1.7;

  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-widest:0.12em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Espaciado */
  --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;
  --space-32:128px;

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;

  --shadow-sm:0 1px 3px rgba(43,35,32,0.10);
  --shadow-md:0 6px 20px rgba(43,35,32,0.12);
  --shadow-lg:0 16px 40px rgba(43,35,32,0.16);
  --shadow-inset:inset 0 1px 2px rgba(43,35,32,0.08);

  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --duration-fast:150ms;
  --duration-normal:220ms;
  --duration-slow:500ms;
  --container-max:1200px;
}