/* ─────────────────────────────────────────────────────────────────
 * Nostalgic Apparel · Design Tokens v1.0
 *
 * Fuente: theme Shopify live WORK-2026-05 (extraído 2026-05-18).
 *   · config/settings_data.json (12 color_schemes + tipografía)
 *   · snippets/theme-styles-variables.liquid (spacing/layers/opacity)
 *   · assets/base.css (transitions, hover)
 *
 * Uso: importar este archivo en email templates, landing pages,
 *      brand documents y cualquier proyecto Nostalgic.
 *
 *   @import url('nostalgic/tokens.css');
 *   body { font-family: var(--nos-font-body); }
 * ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ── PALETTE · troncales ───────────────────────────── */
  --nos-bg:           #ffffff;
  --nos-cream:        #edebe7;
  --nos-ink:          #030302;
  --nos-ink-soft:     rgba(3,3,2,.76);
  --nos-ink-muted:    rgba(3,3,2,.55);
  --nos-deep:         #000000;
  --nos-accent:       #2e4aa3;
  --nos-accent-deep:  #1f3677;
  --nos-alert:        #d91d1d;
  --nos-alert-soft:   rgba(217,29,29,.10);
  --nos-success:      #1fba54;
  --nos-warm-border:  #d3cec5;
  --nos-border:       #e6e6e6;

  /* ── PALETTE · 12 color schemes (theme live) ──────── */
  --nos-scheme1-bg:      #ffffff;  --nos-scheme1-fg:  #030302;  --nos-scheme1-btn:  #000000;
  --nos-scheme2-bg:      #edebe7;  --nos-scheme2-fg:  #000000;  --nos-scheme2-btn:  #000000;
  --nos-scheme3-bg:      #2e4aa3;  --nos-scheme3-fg:  #ffffff;  --nos-scheme3-btn:  #ffffff;
  --nos-scheme4-bg:      #ffffff;  --nos-scheme4-fg:  #d91d1d;  --nos-scheme4-btn:  #000000;
  --nos-scheme5-bg:      #030302;  --nos-scheme5-fg:  #ffffff;  --nos-scheme5-btn:  #ffffff;
  --nos-scheme6-bg:      transparent; --nos-scheme6-fg: #ffffff; --nos-scheme6-btn: #ffffff;
  --nos-scheme7-bg:      transparent; --nos-scheme7-fg: #000000; --nos-scheme7-btn: #acacac;
  --nos-promo-green:     #1fba54;
  --nos-promo-rose:      #924a62;
  --nos-secondary-blue:  #000f9f;

  /* ── TYPOGRAPHY ───────────────────────────────────── */
  --nos-font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nos-font-body:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nos-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Pesos */
  --nos-weight-regular:  400;
  --nos-weight-medium:   500;
  --nos-weight-semibold: 600;
  --nos-weight-bold:     700;
  --nos-weight-heavy:    800;

  /* Tamaños · escala del theme */
  --nos-size-h1:    72px;
  --nos-size-h2:    32px;
  --nos-size-h3:    24px;
  --nos-size-h4:    14px;
  --nos-size-h5:    14px;
  --nos-size-h6:    12px;
  --nos-size-body:  16px;
  --nos-size-small: 13px;
  --nos-size-xs:    11px;

  /* Line-heights · "display-tight / display-normal / body-tight" del theme */
  --nos-lh-display-tight:  0.94;
  --nos-lh-display-normal: 1.1;
  --nos-lh-tight:          1.3;
  --nos-lh-body:           1.5;
  --nos-lh-loose:          1.65;

  /* Letter-spacing · "heading-normal / heading-loose" del theme */
  --nos-ls-display:       -0.04em;
  --nos-ls-heading:       -0.02em;
  --nos-ls-body:          -0.005em;
  --nos-ls-eyebrow:       0.18em;
  --nos-ls-eyebrow-loose: 0.20em;

  /* ── BORDER RADIUS · del theme settings ───────────── */
  --nos-r-none:   0px;
  --nos-r-btn:    2px;
  --nos-r-btn-sec: 0px;
  --nos-r-card:   2px;
  --nos-r-badge:  2px;
  --nos-r-input:  8px;
  --nos-r-popover:8px;
  --nos-r-pill:   100px;
  --nos-r-circle: 100%;

  /* ── BORDER WIDTH ─────────────────────────────────── */
  --nos-border-btn:     1px;
  --nos-border-input:   1px;
  --nos-border-variant: 1px;

  /* ── SPACING · sistema 4px del DS ─────────────────── */
  /* Escala documentada para email/landing/brand. El theme usa rems pequeños (xs 0.5rem → xl 1.25rem). */
  --nos-space-0:  0;
  --nos-space-1:  4px;
  --nos-space-2:  8px;
  --nos-space-3:  12px;
  --nos-space-4:  16px;
  --nos-space-5:  20px;
  --nos-space-6:  24px;
  --nos-space-8:  32px;
  --nos-space-10: 40px;
  --nos-space-12: 48px;
  --nos-space-16: 64px;
  --nos-space-20: 80px;

  /* Gaps · del theme directamente */
  --nos-gap-xs: 0.5rem;  /* 8px */
  --nos-gap-sm: 0.7rem;  /* 11px */
  --nos-gap-md: 0.9rem;  /* 14px */
  --nos-gap-lg: 1rem;    /* 16px */
  --nos-gap-xl: 1.25rem; /* 20px */

  /* ── LAYERS (z-index) · del theme ─────────────────── */
  --nos-z-section-bg: -2;
  --nos-z-lowest:     -1;
  --nos-z-base:        0;
  --nos-z-flat:        1;
  --nos-z-raised:      2;
  --nos-z-heightened:  4;
  --nos-z-sticky:      8;
  --nos-z-overlay:    10;
  --nos-z-menu:       12;
  --nos-z-modal:      16;
  --nos-z-drawer:     18;
  --nos-z-temporary:  20;

  /* ── OPACITY scale · del theme ────────────────────── */
  --nos-opacity-5:  0.05;
  --nos-opacity-8:  0.08;
  --nos-opacity-10: 0.10;
  --nos-opacity-15: 0.15;
  --nos-opacity-20: 0.20;
  --nos-opacity-25: 0.25;
  --nos-opacity-30: 0.30;
  --nos-opacity-40: 0.40;
  --nos-opacity-50: 0.50;
  --nos-opacity-60: 0.60;
  --nos-opacity-70: 0.70;
  --nos-opacity-80: 0.80;
  --nos-opacity-85: 0.85;
  --nos-opacity-90: 0.90;

  /* ── SHADOWS · del theme ──────────────────────────── */
  --nos-shadow-button:  0 2px 3px rgba(0,0,0,.20);
  --nos-shadow-popover: 0px 4px 20px rgba(0,0,0,.15);
  --nos-shadow-card:    0 1px 2px rgba(0,0,0,.08);

  /* ── MOTION · del theme ───────────────────────────── */
  --nos-transition-fast:     150ms ease-out;
  --nos-transition-default:  250ms ease-out;
  --nos-transition-slow:     400ms ease-out;
  --nos-hover-lift:          4px;
  --nos-hover-scale:         1.03;

  /* ── ICONS ────────────────────────────────────────── */
  --nos-icon-stroke: 1.5px;
  --nos-icon-size-sm: 16px;
  --nos-icon-size-md: 20px;
  --nos-icon-size-lg: 24px;

  /* ── CONTAINERS ───────────────────────────────────── */
  --nos-container-max:  1280px;
  --nos-container-pad:  28px;
  --nos-section-pad-y:  64px;
}

/* ─────────────────────────────────────────────────────────────────
 * Reset mínimo opcional (no obligatorio, deja el contexto del consumidor)
 * Solo aplica si añades clase `.nos-reset` al root.
 * ─────────────────────────────────────────────────────────────── */
.nos-reset, .nos-reset *, .nos-reset *::before, .nos-reset *::after {
  box-sizing: border-box;
}
.nos-reset {
  font-family: var(--nos-font-body);
  font-size: var(--nos-size-body);
  line-height: var(--nos-lh-body);
  color: var(--nos-ink);
  background: var(--nos-bg);
  letter-spacing: var(--nos-ls-body);
  -webkit-font-smoothing: antialiased;
}