/* Backward-compat aliases — map old project-specific custom-property names
   to Shopify theme tokens so existing page styles continue to render while
   the visual layer transitions to verbatim Shopify CSS. */

:root {
  --color-bg: rgb(var(--color-background));
  --color-bg-alt: rgb(243, 243, 243);
  --color-bg-dark: rgb(18, 18, 18);
  --color-bg-darker: rgb(0, 0, 0);

  --color-border: rgba(var(--color-foreground), 0.1);
  --color-border-strong: rgba(var(--color-foreground), 0.2);
  --color-border-light: rgba(var(--color-foreground), 0.06);

  --color-text: rgb(var(--color-foreground));
  --color-text-secondary: rgba(var(--color-foreground), 0.75);
  --color-text-muted: rgba(var(--color-foreground), 0.5);
  --color-text-inverse: #ffffff;

  --color-accent: #fa266c;
  --color-accent-hover: #d61e5a;
  --color-accent-secondary: #deff04;

  --color-btn-bg: rgb(var(--color-foreground));
  --color-btn-text: rgb(var(--color-background));

  --font-body: var(--font-body-family);
  --font-heading: var(--font-heading-family);
  --font-sans: var(--font-body-family);

  --space-section: clamp(4rem, 8vw, 7rem);
  --space-block: clamp(2.5rem, 5vw, 4.5rem);
  --space-element: clamp(1.25rem, 2.5vw, 2rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --container-narrow: 800px;
  --container: 1200px;
  --container-wide: 1400px;
}

/* Layout helpers used by older page templates */
.container,
.container-wide,
.container-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container { max-width: var(--container); }
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

.bg-light { background-color: var(--color-bg-alt); }
.bg-dark { background-color: var(--color-bg-dark); color: var(--color-text-inverse); }

.img-container { overflow: hidden; }
.img-container img { transition: transform 0.6s var(--ease-out); }
.img-container:hover img { transform: scale(1.03); }

.text-eyebrow {
  font-family: var(--font-body-family);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.text-display {
  font-family: var(--font-heading-family);
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
}
.text-hero {
  font-family: var(--font-heading-family);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 400; line-height: 1.1;
}
.text-title {
  font-family: var(--font-heading-family);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 500; line-height: 1.2;
}

/* Generic button helpers */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 1.05rem 2.25rem;
  font-family: var(--font-body-family); font-size: 0.875rem;
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  transition: all 0.2s ease; cursor: pointer; white-space: nowrap;
  border: 1px solid currentColor;
}
.btn-primary {
  background-color: #fa266c; color: #fff; border-color: #fa266c;
}
.btn-primary:hover { background-color: #d61e5a; border-color: #d61e5a; color: #fff; }
.btn-outline { background: transparent; color: rgb(var(--color-foreground)); border-color: rgb(var(--color-foreground)); }
.btn-outline:hover { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
.btn-white { background: #fff; color: #121212; border-color: #fff; }