/* mara-vital — Spacing, Border & Layout Tokens */

:root {
  /* ── Base scale (4px grid) ─────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* ── Semantic / layout ─────────────────────────────────────── */
  --space-page-x:      80px;   /* horizontal page padding */
  --space-page-y:     100px;   /* top/bottom section padding */
  --space-nav-y:       36px;   /* nav vertical padding */
  --space-card-pad:    28px;   /* product card inner padding */
  --space-card-pad-lg: 44px;   /* large card / panel inner padding */
  --space-section-gap: 64px;   /* gap between slide sections */
  --space-col-gap:     16px;   /* product card grid gap */

  /* ── Borders & hairlines ───────────────────────────────────── */
  /* RULE: sharp corners throughout — border-radius is always 0 */
  --radius: 0px;

  --border-hairline:      1px solid var(--color-accent-20);   /* on dark, subtle gold */
  --border-light:         1px solid var(--color-border-light); /* on warm-bg */
  --border-dark:          1px solid rgba(255,255,255,0.08); /* @kind other */   /* section dividers on dark */
  --border-cta:           1px solid var(--color-dark);         /* CTA button on light */
  --border-cta-dark:      1px solid rgba(255,255,255,0.35); /* @kind other */   /* CTA button on dark */
  --border-accent:        1px solid var(--color-accent-40);    /* accent hairline / underline */

  /* ── Image filters ─────────────────────────────────────────── */
  --filter-lifestyle:  brightness(0.60) saturate(0.70); /* @kind other */  /* lifestyle / category photos */
  --filter-dark-hero:  brightness(0.38) saturate(0.60); /* @kind other */  /* hero images */
  --filter-muted:      brightness(0.50) saturate(0.50); /* @kind other */  /* showroom, secondary photos */
}