/*
  Lumbre Pura — Design tokens
  Fuente de verdad: docs/brand/manual-de-marca.md
  Cualquier valor que se repita dos veces en el CSS pertenece acá.
*/

:root {
  /* ─── Paleta de marca ─────────────────────────────────────────────── */
  --color-bone:    #EAE3D6;  /* fondo principal, espacio negativo */
  --color-smoke:   #2B2A28;  /* texto principal, acentos oscuros */
  --color-sand:    #D4C7B0;  /* fondos secundarios, packaging */
  --color-walnut:  #6B4F3A;  /* detalles cálidos, elementos de marca */
  --color-bronze:  #8B6F47;  /* detalles cálidos, acentos decorativos */

  /* ─── Roles semánticos ────────────────────────────────────────────── */
  --color-bg:              var(--color-bone);
  --color-bg-alt:          var(--color-sand);
  --color-bg-inverse:      var(--color-smoke);
  --color-fg:              var(--color-smoke);
  --color-fg-muted:        rgba(43, 42, 40, 0.62);
  --color-fg-inverse:      var(--color-bone);
  --color-accent:          var(--color-walnut);
  --color-accent-strong:   var(--color-bronze);
  --color-border:          rgba(43, 42, 40, 0.12);
  --color-border-strong:   rgba(43, 42, 40, 0.28);
  --color-overlay:         rgba(43, 42, 40, 0.55);

  /* Estados de feedback (mínimos, sobrios — sin alarmas saturadas) */
  --color-positive:        #4F5E3A;  /* verde olivo profundo */
  --color-negative:        #8C3A2A;  /* terracota apagada */

  /* ─── Tipografía ──────────────────────────────────────────────────── */
  --font-serif: "Fraunces", "Recoleta", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Söhne", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala modular 1.250 (major third). Base 17px mobile, 18px en md+ via html. */
  --fs-xs:       0.694rem;   /* 11.8 / 12.5 */
  --fs-sm:       0.833rem;   /* 14.2 / 15.0 */
  --fs-base:     1rem;       /* 17 / 18 */
  --fs-md:       1.2rem;     /* 20.4 / 21.6 */
  --fs-lg:       1.44rem;    /* 24.5 / 25.9 */
  --fs-xl:       1.728rem;   /* 29.4 / 31.1 */
  --fs-2xl:      2.074rem;   /* 35.3 / 37.3 */
  --fs-3xl:      2.488rem;   /* 42.3 / 44.8 */
  --fs-display:  2.986rem;   /* 50.8 / 53.8 */

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

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  --ls-tight:  -0.02em;
  --ls-base:   0;
  --ls-wide:   0.04em;
  --ls-wider:  0.14em;

  /* ─── Spacing (escala de 4px) ─────────────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* ─── Radios (mínimos — Lumbre Pura tiende a esquinas firmes) ─────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ─── Sombras (discretas, cálidas, nunca azuladas) ────────────────── */
  --shadow-sm: 0 1px 2px rgba(43, 42, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(43, 42, 40, 0.08);
  --shadow-lg: 0 16px 40px rgba(43, 42, 40, 0.10);
  --shadow-focus: 0 0 0 3px rgba(107, 79, 58, 0.35);

  /* ─── Movimiento ──────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  150ms;
  --duration-base:  280ms;
  --duration-slow:  500ms;

  /* ─── Layout ──────────────────────────────────────────────────────── */
  --container-narrow: 720px;
  --container-base:  1080px;
  --container-wide:  1280px;
  --gutter:           var(--space-4);
  --header-height:    72px;
  --z-header:         50;
  --z-modal:          80;
  --z-toast:          90;

  /* ─── Breakpoints (para referencia en JS / container queries) ─────── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
    --header-height: 88px;
  }
}