/* ============================================================
   Vaia Design System — Tokens
   Imports: Anton (display) + Archivo (sans)
   ============================================================ */

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

:root {
  /* ---------- Color · Core ---------- */
  --vaia-ink:            #0B0B0C;  /* primary near-black */
  --vaia-ink-900:        #17181A;
  --vaia-ink-800:        #24262A;
  --vaia-ink-700:        #3A3D42;
  --vaia-ink-500:        #6B6F76;
  --vaia-ink-300:        #A7ABB2;
  --vaia-ink-200:        #C7CACF;
  --vaia-ink-100:        #E3E4E7;
  --vaia-ink-50:         #F1F1F2;

  --vaia-cream:          #F4F1EA;  /* paper / primary light surface */
  --vaia-cream-2:        #EBE6DA;
  --vaia-cream-3:        #DFD9C8;
  --vaia-white:          #FFFFFF;

  --vaia-cobalt:         #1E54FF;  /* signature accent */
  --vaia-cobalt-hover:   #1847DB;
  --vaia-cobalt-press:   #143AB0;
  --vaia-cobalt-tint:    #E5ECFF;

  --vaia-chlorine:       #22E3C4;  /* pool turquoise */
  --vaia-chlorine-deep:  #0FB09B;

  --vaia-volt:           #E6FF3B;  /* sport yellow pop */

  /* ---------- Color · Semantic ---------- */
  --vaia-bg:             var(--vaia-cream);
  --vaia-bg-alt:         var(--vaia-cream-2);
  --vaia-bg-inverse:     var(--vaia-ink);

  --vaia-fg:             var(--vaia-ink);
  --vaia-fg-muted:       var(--vaia-ink-700);
  --vaia-fg-subtle:      var(--vaia-ink-500);
  --vaia-fg-inverse:     var(--vaia-cream);

  --vaia-border:         rgba(11, 11, 12, 0.12);
  --vaia-border-strong:  rgba(11, 11, 12, 0.24);
  --vaia-border-inverse: rgba(244, 241, 234, 0.14);

  --vaia-accent:         var(--vaia-cobalt);
  --vaia-accent-fg:      var(--vaia-cream);

  --vaia-success:        #0FB09B;
  --vaia-warning:        #E6A93B;
  --vaia-danger:         #D93D2C;

  /* ---------- Type families ---------- */
  --vaia-font-display:   'Anton', 'Oswald', 'Impact', system-ui, sans-serif;
  --vaia-font-sans:      'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vaia-font-mono:      ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* ---------- Type scale ---------- */
  --vaia-fs-12: 12px;   --vaia-lh-12: 1.3;
  --vaia-fs-14: 14px;   --vaia-lh-14: 1.4;
  --vaia-fs-16: 16px;   --vaia-lh-16: 1.5;
  --vaia-fs-18: 18px;   --vaia-lh-18: 1.5;
  --vaia-fs-24: 24px;   --vaia-lh-24: 1.25;
  --vaia-fs-32: 32px;   --vaia-lh-32: 1.1;
  --vaia-fs-48: 48px;   --vaia-lh-48: 1.0;
  --vaia-fs-72: 72px;   --vaia-lh-72: 0.95;
  --vaia-fs-120: 120px; --vaia-lh-120: 0.9;
  --vaia-fs-160: 160px; --vaia-lh-160: 0.85;

  --vaia-tracking-tight: -0.01em;
  --vaia-tracking-base:  0;
  --vaia-tracking-wide:  0.04em;
  --vaia-tracking-xwide: 0.08em;

  /* ---------- Spacing (4pt base) ---------- */
  --vaia-sp-1: 4px;
  --vaia-sp-2: 8px;
  --vaia-sp-3: 12px;
  --vaia-sp-4: 16px;
  --vaia-sp-5: 24px;
  --vaia-sp-6: 32px;
  --vaia-sp-7: 48px;
  --vaia-sp-8: 64px;
  --vaia-sp-9: 96px;
  --vaia-sp-10: 128px;

  /* ---------- Radii ---------- */
  --vaia-radius-0:   0;
  --vaia-radius-xs:  2px;
  --vaia-radius-sm:  4px;   /* default — buttons, cards, inputs */
  --vaia-radius-md:  8px;
  --vaia-radius-lg:  12px;
  --vaia-radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --vaia-shadow-sm:  0 1px 2px rgba(11,11,12,.06);
  --vaia-shadow-md:  0 8px 24px rgba(11,11,12,.08);
  --vaia-shadow-lg:  0 24px 60px rgba(11,11,12,.12);
  --vaia-shadow-focus: 0 0 0 2px var(--vaia-cobalt) inset;

  /* ---------- Motion ---------- */
  --vaia-ease:        cubic-bezier(.2, .7, .2, 1);
  --vaia-dur-fast:    80ms;
  --vaia-dur-base:    180ms;
  --vaia-dur-slow:    260ms;

  /* ---------- Layout ---------- */
  --vaia-container-max: 1440px;
  --vaia-container-pad: 72px;
  --vaia-nav-h:         64px;
}

/* ============================================================
   Semantic text styles
   Apply via class, or extend via @extend equivalent.
   ============================================================ */

.vaia-display-xl,
.vaia-display-l,
.vaia-display-m,
.vaia-h1, .vaia-h2 {
  font-family: var(--vaia-font-display);
  text-transform: uppercase;
  letter-spacing: var(--vaia-tracking-tight);
  font-weight: 400; /* Anton ships at 400 only */
  color: var(--vaia-fg);
}

.vaia-display-xl { font-size: var(--vaia-fs-160); line-height: var(--vaia-lh-160); }
.vaia-display-l  { font-size: var(--vaia-fs-120); line-height: var(--vaia-lh-120); }
.vaia-display-m  { font-size: var(--vaia-fs-72);  line-height: var(--vaia-lh-72); }
.vaia-h1         { font-size: var(--vaia-fs-48);  line-height: var(--vaia-lh-48); }
.vaia-h2         { font-size: var(--vaia-fs-32);  line-height: var(--vaia-lh-32); }

.vaia-h3, .vaia-h4, .vaia-eyebrow, .vaia-label, .vaia-button, body, p, .vaia-body, .vaia-small {
  font-family: var(--vaia-font-sans);
  color: var(--vaia-fg);
}

.vaia-h3 {
  font-size: var(--vaia-fs-24);
  line-height: var(--vaia-lh-24);
  font-weight: 700;
  letter-spacing: var(--vaia-tracking-tight);
}

.vaia-h4 {
  font-size: var(--vaia-fs-18);
  line-height: var(--vaia-lh-18);
  font-weight: 700;
  letter-spacing: var(--vaia-tracking-tight);
}

.vaia-eyebrow {
  font-size: var(--vaia-fs-12);
  line-height: var(--vaia-lh-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--vaia-tracking-xwide);
}

.vaia-label {
  font-size: var(--vaia-fs-14);
  line-height: var(--vaia-lh-14);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vaia-tracking-wide);
}

.vaia-button {
  font-size: var(--vaia-fs-14);
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vaia-tracking-wide);
}

.vaia-body {
  font-size: var(--vaia-fs-16);
  line-height: var(--vaia-lh-16);
  font-weight: 400;
  color: var(--vaia-fg);
}

.vaia-body-lg {
  font-size: var(--vaia-fs-18);
  line-height: var(--vaia-lh-18);
  font-weight: 400;
}

.vaia-small {
  font-size: var(--vaia-fs-14);
  line-height: var(--vaia-lh-14);
  color: var(--vaia-fg-muted);
}

.vaia-caption {
  font-family: var(--vaia-font-sans);
  font-size: var(--vaia-fs-12);
  line-height: var(--vaia-lh-12);
  color: var(--vaia-fg-subtle);
}

/* ============================================================
   Base
   ============================================================ */

body.vaia {
  font-family: var(--vaia-font-sans);
  font-size: var(--vaia-fs-16);
  line-height: var(--vaia-lh-16);
  color: var(--vaia-fg);
  background: var(--vaia-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* ============================================================
   Buttons
   ============================================================ */

.vaia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vaia-sp-2);
  height: 48px;
  padding: 0 var(--vaia-sp-5);
  border-radius: var(--vaia-radius-sm);
  border: 1px solid transparent;
  font-family: var(--vaia-font-sans);
  font-size: var(--vaia-fs-14);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vaia-tracking-wide);
  cursor: pointer;
  transition: background var(--vaia-dur-base) var(--vaia-ease),
              color var(--vaia-dur-base) var(--vaia-ease),
              transform var(--vaia-dur-fast) var(--vaia-ease),
              border-color var(--vaia-dur-base) var(--vaia-ease);
  text-decoration: none;
  user-select: none;
}
.vaia-btn:active { transform: scale(0.98); }

.vaia-btn--primary   { background: var(--vaia-ink); color: var(--vaia-cream); }
.vaia-btn--primary:hover   { background: var(--vaia-ink-800); }

.vaia-btn--accent    { background: var(--vaia-cobalt); color: var(--vaia-cream); }
.vaia-btn--accent:hover    { background: var(--vaia-cobalt-hover); }

.vaia-btn--secondary { background: var(--vaia-cream); color: var(--vaia-ink); border-color: var(--vaia-ink); }
.vaia-btn--secondary:hover { background: var(--vaia-ink); color: var(--vaia-cream); }

.vaia-btn--ghost     { background: transparent; color: var(--vaia-ink); }
.vaia-btn--ghost:hover     { background: var(--vaia-ink-50); }

.vaia-btn--sm        { height: 36px; padding: 0 var(--vaia-sp-4); font-size: var(--vaia-fs-12); }
.vaia-btn--lg        { height: 56px; padding: 0 var(--vaia-sp-6); font-size: var(--vaia-fs-16); }
.vaia-btn--block     { display: flex; width: 100%; }

/* ============================================================
   Inputs
   ============================================================ */

.vaia-input {
  height: 48px;
  width: 100%;
  padding: 0 var(--vaia-sp-4);
  background: var(--vaia-cream);
  border: 1px solid var(--vaia-border);
  border-radius: var(--vaia-radius-sm);
  font-family: var(--vaia-font-sans);
  font-size: var(--vaia-fs-16);
  color: var(--vaia-fg);
  transition: border-color var(--vaia-dur-base) var(--vaia-ease),
              box-shadow var(--vaia-dur-base) var(--vaia-ease);
}
.vaia-input::placeholder { color: var(--vaia-fg-subtle); }
.vaia-input:hover { border-color: var(--vaia-border-strong); }
.vaia-input:focus {
  outline: none;
  border-color: var(--vaia-cobalt);
  box-shadow: var(--vaia-shadow-focus);
}

/* ============================================================
   Chips / pills (size selectors, filters)
   ============================================================ */

.vaia-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--vaia-sp-4);
  border: 1px solid var(--vaia-border-strong);
  border-radius: var(--vaia-radius-pill);
  background: transparent;
  font-family: var(--vaia-font-sans);
  font-size: var(--vaia-fs-14);
  font-weight: 600;
  color: var(--vaia-fg);
  cursor: pointer;
  transition: all var(--vaia-dur-base) var(--vaia-ease);
}
.vaia-chip:hover { background: var(--vaia-ink-50); }
.vaia-chip[aria-pressed="true"],
.vaia-chip--active { background: var(--vaia-ink); color: var(--vaia-cream); border-color: var(--vaia-ink); }
.vaia-chip[disabled] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

/* ============================================================
   Badge (labels on product cards: "DROP", "-20%", "NEW")
   ============================================================ */

.vaia-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--vaia-sp-2);
  font-family: var(--vaia-font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--vaia-tracking-xwide);
  border-radius: var(--vaia-radius-xs);
  background: var(--vaia-ink);
  color: var(--vaia-cream);
}
.vaia-badge--accent { background: var(--vaia-cobalt); }
.vaia-badge--volt   { background: var(--vaia-volt); color: var(--vaia-ink); }
.vaia-badge--cream  { background: var(--vaia-cream); color: var(--vaia-ink); }

/* ============================================================
   Cards
   ============================================================ */

.vaia-card {
  background: var(--vaia-cream);
  border: 1px solid var(--vaia-border);
  border-radius: var(--vaia-radius-sm);
  padding: var(--vaia-sp-5);
}

.vaia-product-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--vaia-dur-base) var(--vaia-ease);
}
.vaia-product-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--vaia-ink-50);
  border-radius: var(--vaia-radius-0);
  transition: opacity var(--vaia-dur-base) var(--vaia-ease);
}
.vaia-product-card:hover .vaia-product-card__img { opacity: 0.92; }
.vaia-product-card:hover .vaia-product-card__title { color: var(--vaia-cobalt); }