/* Auto-generated from apps/yoga/brand.json — do not hand-edit; re-run scripts/build-theme.ts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* palette */
  --color-primary: #8B2FD4;
  --color-primary-dark: #6A1FA8;
  --color-accent: #EC2A76;
  --color-neutral: #FFFFFF;
  --color-ink: #2E2E2E;
  --color-muted: #8A8D96;

  /* typography */
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* shape */
  --radius-base: 10px;
  --radius-sm: calc(10px / 2);
  --radius-lg: calc(10px * 1.5);

  /* shadow preset */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08);

  /* Full-bleed dark bands. The homepage alternates light sections with these —
     hero, features, gallery — so they need their own surface and type colour
     rather than being an inverted afterthought. A brand that has not declared
     them falls back to ink on neutral, which is legible everywhere. */
  --color-band: #2E2E2E;
  --color-on-band: #FFFFFF;
  --color-on-band-muted: color-mix(in srgb, #FFFFFF 62%, transparent);

  /* The brand mark's own gradient, available to type and fills alike. */
  --gradient-brand: linear-gradient(90deg, #EC2A76 0%, #8B2FD4 100%);
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-neutral);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-ink);
}

a { color: var(--color-primary-dark); }
a:hover { color: var(--color-primary); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-neutral);
  border-radius: var(--radius-base);
}
.btn-primary:hover { background: var(--color-primary-dark); }

.badge-accent {
  background: var(--color-accent);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
}

/* --- Dark band sections ------------------------------------------------- */

.band {
  background: var(--color-band);
  color: var(--color-on-band);
}
.band h1, .band h2, .band h3, .band h4 { color: var(--color-on-band); }
.band p { color: var(--color-on-band-muted); }
.band a { color: var(--color-on-band); }

/* The hero and band CTAs are outlined pills — the mark's own shape language. */
.btn-outline {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.band .btn-outline:hover { background: var(--color-on-band); color: var(--color-band); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-neutral); }

/* The solid pill used on light sections, e.g. each category card's CTA. */
.btn-pill {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-neutral);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn-pill:hover { background: var(--color-primary); color: var(--color-neutral); }

.gradient-rule {
  height: 4px;
  border: 0;
  background: var(--gradient-brand);
}