/* ==========================================================================
   tokens.css — Dan Imports · Puerto Peñasco
   Identidad: "la pared verde" de sus fotos de catálogo (verde pasto h≈145)
   + amarillo de etiqueta de precio como acento. Neutros tintados de verde.
   Ejes: expresivo 4 · cálido 3 · contemporáneo 4 · denso 4 · accesible 2
   ========================================================================== */
:root {
  /* Neutros (tintados hacia verde) */
  --bg:            #F6F7F2;
  --surface:       #FFFFFF;
  --muted:         #EEF1E8;
  --muted-2:       #E3E8DC;
  --border:        #E0E5D8;
  --border-strong: #C8D0BD;
  --border-input:  #7F8B75;  /* 3.6:1 sobre surface */

  --ink:   #111A12;          /* 17:1 */
  --ink-2: #344032;          /* 10:1 */
  --ink-3: #566252;          /* 5.9:1 sobre surface */
  --ink-4: #98A393;          /* decorativo */

  /* Marca: verde "pared de catálogo" */
  --brand-25:  #F3FAF2;
  --brand-50:  #E6F5E5;
  --brand-100: #C9EBC8;
  --brand-200: #9FDA9E;
  --brand-300: #6CC46F;
  --brand-400: #39AA48;
  --brand-500: #138033;
  --brand-600: #0E6A2A;
  --brand-700: #0B5824;
  --brand-800: #0A461E;
  --brand-900: #093719;
  --brand-950: #052310;
  --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: amarillo de etiqueta de precio */
  --accent:    #FFD43B;
  --accent-2:  #FFE680;
  --on-accent: #1B1703;
  /* Verde neón de la pared (solo decorativo, nunca texto) */
  --lime:      #57E04A;

  /* Semánticos */
  --ok: #16A34A;   --ok-50: #ECFDF3;   --ok-700: #15803D;
  --warn: #D97706; --warn-50: #FFFBEB;
  --danger: #DC2626; --danger-50: #FEF2F2; --danger-700: #B91C1C;

  /* Inversa: verde bosque casi negro */
  --inverse:        #0B1D12;
  --inverse-2:      #112817;
  --inverse-3:      #19361F;
  --inverse-border: rgba(255,255,255,.10);
  --on-inverse:     #FFFFFF;
  --on-inverse-2:   rgba(255,255,255,.70);

  /* Tipografía: rótulo de súper americano + texto amable */
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight:   800;
  --display-tracking: -0.01em;
  --display-leading:  .96;  /* > .92: deja sitio a los acentos en mayúsculas (Í, Á) */
  --display-settings: normal;
  --display-style:    normal;

  --fs-hero:  clamp(54px, 7.4vw, 112px);
  --fs-h2:    clamp(42px, 5.4vw, 78px);
  --fs-h3:    clamp(24px, 2.2vw, 30px);
  --fs-lead:  clamp(16px, 1.4vw, 18.5px);
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-meta:  12px;

  /* Forma: amable-contemporánea */
  --r-xs: 6px;
  --r-sm: 9px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* Elevación tintada con la tinta verde */
  --shadow-rgb: 17,32,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),.06);
  --sh-md: 0 4px 12px -2px rgba(var(--shadow-rgb),.09), 0 2px 4px -2px rgba(var(--shadow-rgb),.05);
  --sh-lg: 0 12px 20px -6px rgba(var(--shadow-rgb),.13), 0 4px 6px -4px rgba(var(--shadow-rgb),.08);
  --sh-xl: 0 28px 52px -14px rgba(var(--shadow-rgb),.28);
  --sh-btn: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.10), 0 1px 2px rgba(var(--shadow-rgb),.08);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);

  /* Movimiento: energético */
  --ease:        cubic-bezier(.2,.8,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: .15s;
  --dur-2: .22s;
  --dur-3: .34s;
  --dur-4: .65s;

  /* Layout: denso, de catálogo */
  --header-h: 70px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(72px, 9vw, 120px);
  --head-gap: clamp(32px, 4.5vw, 52px);
  --grid-gap: 16px;
}