/* ============================================================
   TOKENS — [MARCA]
   Única fuente de verdad del diseño. Cambiando este archivo se
   re-skinnea toda la tienda sin tocar una sola plantilla.
   En Shopify: estos valores salen de los settings del tema
   (settings_schema.json) y se inyectan en un <style> del layout.
   ============================================================ */

:root {
  /* ---------- Color · superficies ---------- */
  --c-bg:           #0B0C0E;   /* fondo de página */
  --c-surface-1:    #141619;   /* tarjetas, paneles */
  --c-surface-2:    #1D2024;   /* elementos elevados, inputs */
  --c-surface-3:    #262A30;   /* hover de superficies */
  --c-hairline:     #2A2E34;   /* separadores decorativos (no bordes de control) */
  --c-border-ui:    #7C8591;   /* bordes de controles: cumple 3:1 */

  /* ---------- Color · texto ---------- */
  --c-text:         #F2F4F6;
  --c-text-muted:   #A7AFB9;   /* 7,5:1 sobre --c-bg */
  --c-text-onlight: #0B0C0E;

  /* ---------- Color · marca ---------- */
  --c-accent:       #4DF0A0;   /* "señal": máx. 2 apariciones por pantalla */
  --c-accent-ink:   #05130B;   /* texto sobre acento */
  --c-accent-dim:   #2BA870;   /* acento apagado, para bordes sobre claro */
  --c-star:         #FFB020;
  --c-danger:       #FF7A70;
  --c-danger-bg:    #2A1412;

  /* ---------- Color · tema claro (landing de reseñas) ---------- */
  --c-warm-bg:      #FBF6EC;
  --c-warm-ink:     #2B211A;
  --c-warm-muted:   #6A5B4E;
  --c-warm-line:    #E6D9C6;
  --c-warm-accent:  #A83E1C;   /* terracota oscurecido para cumplir 4,5:1 */

  /* ---------- Tipografía ---------- */
  --f-display: 'Clash Display', 'Archivo', system-ui, sans-serif;
  --f-text:    'Satoshi', 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', 'Cascadia Mono', 'Consolas', monospace;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.25rem;   /* 36px */
  --fs-3xl:  clamp(2.25rem, 6vw, 4rem);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.6;

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

  /* ---------- Espaciado (escala de 4) ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* ---------- Formas ---------- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-pill: 999px;

  /* ---------- Layout ---------- */
  --w-page: 1240px;
  --w-text: 68ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Foco (3:1 mínimo sobre cualquier superficie) ---------- */
  --focus-color: var(--c-accent);
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .16s;
  --dur: .3s;
  --dur-slow: .6s;

  /* ---------- Altura mínima de destino táctil (WCAG 2.5.5) ---------- */
  --tap-min: 44px;
}

/* Tema claro puntual: se aplica con class="t-warm" en una sección */
.t-warm {
  --c-bg: var(--c-warm-bg);
  --c-surface-1: #FFFFFF;
  --c-surface-2: #F5EDE0;
  --c-surface-3: #EFE4D3;
  --c-hairline: var(--c-warm-line);
  --c-border-ui: #8A7A66;
  --c-text: var(--c-warm-ink);
  --c-text-muted: var(--c-warm-muted);
  --c-accent: var(--c-warm-accent);
  --c-accent-ink: #FFFFFF;
  --focus-color: var(--c-warm-accent);
}