/* Shared visual language. Change values here rather than in individual sections. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/manrope-variable.ttf") format("truetype");
}

:root {
  color-scheme: dark;

  /* Palette: OLED background, two surfaces, champagne accent. */
  --color-background: #000;
  --color-surface: #0b0b0b;
  --color-surface-raised: #12110f;
  --color-text: #f5f3ec;
  --color-text-secondary: #bcb7ab;
  --color-text-muted: #9a9488;
  --color-gold: #cbb98c;
  --color-gold-hover: #ded0aa;
  --color-on-gold: #17130b;
  --color-border: rgb(203 185 140 / 26%);
  --color-border-strong: rgb(203 185 140 / 50%);
  --color-divider: rgb(255 255 255 / 12%);
  --color-tint: rgb(203 185 140 / 8%);
  --color-tint-selected: rgb(203 185 140 / 14%);
  --color-backdrop: rgb(0 0 0 / 72%);

  /* Typography roles, shared by the page and the event planner. */
  --font-family: "Manrope", Arial, Helvetica, sans-serif;
  --text-label: 0.6875rem;
  --text-caption: 0.75rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-choice: 1.25rem;
  --text-card-title: clamp(1.5rem, 2.25vw, 1.875rem);
  --text-section-title: clamp(2rem, 3.8vw, 3.625rem);
  --text-planner-title: clamp(1.875rem, 3.2vw, 2.375rem);
  --text-hero-title: clamp(3rem, 5.9vw, 5.625rem);
  --text-contact-title: clamp(2rem, 5.3vw, 4.875rem);
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-title: 1.12;
  --leading-control: 1.4;
  --leading-body: 1.65;
  --leading-relaxed: 1.8;
  --tracking-title: -0.04em;
  --tracking-label: 0.14em;

  /* Spacing follows a 4px scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --page-gutter: 6%;
  --section-space: clamp(3.25rem, 7vw, 6rem);

  /* Component dimensions and states. */
  --control-height: 3.25rem;
  --control-compact: 2.75rem;
  --radius-field: 0.75rem;
  --radius-item: 1rem;
  --radius-card: 1.25rem;
  --radius-dialog: 1.5rem;
  --radius-pill: 999px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --brand-size: 0.875rem;
  --brand-tagline-size: 0.4375rem;
  --brand-logo-size: 4.125rem;
  --site-header-height: 6rem;
  --dialog-header-height: 5rem;
  --dialog-progress-height: 4.5rem;
  --dialog-sticky-offset: calc(var(--dialog-header-height) + var(--dialog-progress-height));
  --shadow-dialog: 0 2rem 7.5rem rgb(0 0 0 / 70%);
  --duration-ui: 180ms;
  --duration-photo: 900ms;
  --ease-ui: ease;
}

@media (min-width: 1600px) {
  :root {
    --page-gutter: 8%;
  }
}

@media (max-width: 760px) {
  :root {
    --text-hero-title: clamp(2.375rem, 10.4vw, 3.5rem);
    --text-section-title: clamp(2rem, 8.3vw, 2.5rem);
    --text-contact-title: var(--text-section-title);
    --text-card-title: 1.875rem;
    --section-space: 3.25rem;
    --site-header-height: 5rem;
    --dialog-progress-height: 3.75rem;
  }
}

@media (max-width: 360px) {
  :root {
    --brand-size: 0.75rem;
    --brand-logo-size: 3.75rem;
    --text-card-title: 1.6875rem;
  }
}