/* ==========================================================================
   LeanHaus — Design tokens
   Paleta: Marrón Chocolate & Azul Oxford
   ========================================================================== */

:root {
  /* ---- Paleta de marca ---- */
  --brand-choco: #221310;   /* Fondo base inmersivo · texto sobre claros */
  --brand-oxford: #7898B6;  /* Acento · botones primarios · enlaces */
  --brand-cream: #F4F2EC;   /* Secciones claras · texto en modo oscuro */
  --dark-panel: #1C0F0D;    /* Tarjetas superpuestas · casos · formulario */

  /* ---- Derivados accesibles (WCAG AA) ---- */
  --oxford-ink: #4E6780;    /* Acento para TEXTO sobre crema — 5.25:1 */
  --cream-muted: #B5AFAA;   /* Texto secundario sobre chocolate — 8.3:1 */
  --cream-subtle: #968E89;  /* Captions / bordes de campo sobre chocolate — 5.6:1 */
  --choco-muted: #615652;   /* Texto secundario sobre crema — 6.3:1 */
  --cream-soft: #D9D3CC;    /* Texto de lectura sobre chocolate — 12:1 */
  --choco-soft: #463A36;    /* Texto de lectura sobre crema — 9.8:1 */
  --line-on-dark: rgb(244 242 236 / 0.14);
  --line-on-light: rgb(34 19 16 / 0.14);

  /* ---- Tipografía ---- */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida (móvil → escritorio) */
  --fs-display-xl: clamp(3.25rem, 1.2rem + 8.4vw, 9.75rem);
  --fs-display-l: clamp(2.75rem, 1.5rem + 4.8vw, 6.75rem);
  --fs-display-m: clamp(2rem, 1.35rem + 2.3vw, 3.75rem);
  --fs-statement: clamp(1.625rem, 1.1rem + 1.9vw, 3.125rem);
  --fs-title: clamp(1.375rem, 1.15rem + 0.7vw, 1.875rem);
  --fs-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 0.94;
  --lh-snug: 1.12;
  --lh-body: 1.6;

  /* ---- Espaciado y layout ---- */
  --container: 88rem;
  --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 4rem);
  --space-section: clamp(6rem, 3.5rem + 9vw, 11.5rem);
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --header-h: 4.75rem;

  /* ---- Forma ---- */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;

  /* Láminas: secciones con esquinas superiores redondeadas que se superponen */
  --sheet-r: clamp(24px, 1rem + 2vw, 48px);

  /* ---- Movimiento ---- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;
}

/* ---- Temas por sección: los componentes solo leen --bg / --fg / --accent ---- */
.theme-dark {
  --bg: var(--brand-choco);
  --surface: var(--dark-panel);
  --fg: var(--brand-cream);
  --fg-soft: var(--cream-soft);
  --fg-muted: var(--cream-muted);
  --fg-subtle: var(--cream-subtle);
  --accent: var(--brand-oxford);
  --accent-text: var(--brand-oxford);
  --on-accent: var(--brand-choco);
  --line: var(--line-on-dark);
  --focus: var(--brand-oxford);
  --error: #F0B8A6;       /* 8,9:1 sobre chocolate */
  --error-line: #E8A48F;
}

.theme-light {
  --bg: var(--brand-cream);
  --surface: #ECE9E1;
  --fg: var(--brand-choco);
  --fg-soft: var(--choco-soft);
  --fg-muted: var(--choco-muted);
  --fg-subtle: var(--choco-muted);
  --accent: var(--brand-oxford);
  --accent-text: var(--oxford-ink);
  --on-accent: var(--brand-choco);
  --line: var(--line-on-light);
  --focus: var(--oxford-ink);
  --error: #9B3A22;       /* 6,2:1 sobre crema */
  --error-line: #B2482C;
}

.theme-accent {
  --bg: var(--brand-oxford);
  --fg: var(--brand-choco);
  --fg-soft: var(--brand-choco);
  --fg-muted: var(--brand-choco);
  --fg-subtle: var(--brand-choco);
  --accent-text: var(--brand-choco);
  --line: rgb(34 19 16 / 0.2);
  --focus: var(--brand-choco);
}