/* ==========================================================================
   tokens.css — Mundo Maderero Siglo XXI · Puerto Peñasco, Sonora

   Identidad derivada de la marca REAL (logo y publicaciones de Facebook):
   · Verde pino del isotipo (pino dentro de un globo terráqueo)
   · Franja negra + franja lima del logotipo
   · Lima #A6CE39 de sus publicaciones ("hace rendir tu dinero")
   · Neutros de papel kraft / madera clara (bodega y taller)

   Ejes: Sobrio 3 · Cálido 4 · Clásico-contemporáneo 3 · Densidad 3 · Accesible 2
   Display serif (eco del wordmark del logo) + sans técnica + mono para medidas.
   ========================================================================== */

:root {
  /* ---------- Neutros tintados (kraft / madera clara) ---------- */
  --bg:            #F6F3EB;
  --surface:       #FFFFFF;
  --muted:         #EEEADF;
  --muted-2:       #E3DED0;
  --border:        #DCD6C6;
  --border-strong: #C0B8A3;
  --border-input:  #7A7462;

  --ink:   #121912;
  --ink-2: #283128;
  --ink-3: #4F5A50;
  --ink-4: #8B9289;

  /* ---------- Marca: verde pino del isotipo ---------- */
  --brand-25:  #F2F7F1;
  --brand-50:  #E3EFE2;
  --brand-100: #C3DDC1;
  --brand-200: #93C08F;
  --brand-300: #5E9C5A;
  --brand-400: #357A36;
  --brand-500: #1F5F2A;       /* verde pino (botón primario) */
  --brand-600: #174B21;
  --brand-700: #123C1A;       /* texto de marca pequeño */
  --brand-800: #0D2D13;
  --brand-900: #091F0D;
  --brand-950: #041007;
  --brand: var(--brand-500);
  --on-brand: #FFFFFF;

  --brand-hover:       var(--brand-600);
  --brand-soft:        var(--brand-50);
  --brand-soft-border: var(--brand-100);
  --brand-text:        var(--brand-700);

  /* Acento: lima de la franja del logo — SIEMPRE con texto oscuro encima */
  --accent:      #A6CE39;
  --accent-soft: #EEF6D5;
  --on-accent:   #10190B;

  /* Madera (detalles de puertas, cotas, sellos) */
  --wood:      #B98A55;
  --wood-dark: #7A5530;

  /* ---------- Semánticos ---------- */
  --ok:      #1E8A3E; --ok-50:   #EAF7EE; --ok-700:   #166B30;
  --warn:    #C77700; --warn-50: #FFF7E6;
  --danger:  #C7362B; --danger-50: #FDF0EE; --danger-700: #A62A21;

  /* ---------- Superficie inversa (bosque nocturno) ---------- */
  --inverse:        #0E1710;
  --inverse-2:      #152017;
  --inverse-3:      #1E2C20;
  --inverse-border: rgba(255,255,255,.08);
  --on-inverse:     #F3F1E8;
  --on-inverse-2:   rgba(243,241,232,.66);

  /* ---------- Tipografía ---------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight:   560;
  --display-tracking: -0.025em;
  --display-leading:  .98;
  --display-settings: "opsz" 120, "SOFT" 30;
  --display-style:    normal;

  --fs-hero:  clamp(44px, 6.6vw, 96px);
  --fs-h2:    clamp(34px, 4.6vw, 64px);
  --fs-h3:    clamp(20px, 1.8vw, 24px);
  --fs-lead:  clamp(16px, 1.3vw, 18.5px);
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-meta:  11.5px;

  /* ---------- Forma (carpintería: cantos precisos) ---------- */
  --r-xs:  3px;
  --r-sm:  5px;
  --r:     8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* ---------- Elevación (sombras tintadas de verde bosque) ---------- */
  --shadow-rgb: 16,28,18;
  --sh-xs: 0 1px 2px rgba(var(--shadow-rgb),.06);
  --sh-sm: 0 1px 3px rgba(var(--shadow-rgb),.09), 0 1px 2px -1px rgba(var(--shadow-rgb),.07);
  --sh-md: 0 4px 12px -2px rgba(var(--shadow-rgb),.10), 0 2px 4px -2px rgba(var(--shadow-rgb),.06);
  --sh-lg: 0 12px 20px -6px rgba(var(--shadow-rgb),.14), 0 4px 8px -4px rgba(var(--shadow-rgb),.08);
  --sh-xl: 0 30px 60px -18px rgba(var(--shadow-rgb),.34);
  --sh-btn: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.12), 0 1px 2px rgba(var(--shadow-rgb),.08);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent);

  /* ---------- Movimiento ---------- */
  --ease:        cubic-bezier(.2,.8,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-hinge:  cubic-bezier(.3,1.25,.4,1);   /* bisagra: leve rebote al abrir */
  --dur-1: .15s;
  --dur-2: .25s;
  --dur-3: .36s;
  --dur-4: .7s;

  /* ---------- Layout ---------- */
  --header-h:  72px;
  --container: 1280px;
  --gutter:    clamp(16px, 4vw, 32px);
  --section-y: clamp(72px, 10vw, 128px);
  --head-gap:  clamp(32px, 5vw, 56px);
  --grid-gap:  14px;
}