/*
  Design pack control layer
  Intended Etch location: Stylesheets > Design Pack Control Layer

  This layer identifies the active design pack and exposes broad project-owned
  --bg-pack-* variables. Individual section designs should live in their own
  template section files, such as sections/template-01/problems-t01.css or
  sections/template-02/problems-t02.css.

  Keep this file light. Do not use it as the main place to control individual
  section layouts or detailed section styling.

  Avoid redefining core ACSS tokens such as --section-space-l directly.
*/

.bg-design-pack {
  --bg-pack-section-space: var(--section-space-l);
  --bg-pack-card-radius: var(--radius);
  --bg-pack-card-radius-large: var(--radius);
  --bg-pack-field-radius: var(--radius);
  --bg-pack-button-radius: var(--radius);
  --bg-pack-hero-content-max: 52rem;
}

.bg-design-pack--template-1 {
  --bg-pack-section-space: var(--section-space-l);
  --bg-pack-card-radius: var(--radius);
  --bg-pack-card-radius-large: var(--radius);
  --bg-pack-field-radius: var(--radius);
  --bg-pack-button-radius: var(--radius);
  --bg-pack-hero-content-max: 52rem;
}

.bg-design-pack--template-2 {
  --bg-pack-section-space: var(--section-space-m);
  --bg-pack-card-radius: var(--radius);
  --bg-pack-card-radius-large: var(--radius);
  --bg-pack-field-radius: var(--radius);
  --bg-pack-button-radius: var(--radius);
  --bg-pack-hero-content-max: 42rem;
}