/* Shared visual foundations. Display type remains specific to Bmaximum. */
:root {
  --head: "Syne", "Segoe UI", Arial, sans-serif;
  --body: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --ink: #1c1e1a;
  --paper: #f5f3ee;
  --red: #c73527;
  --red-hover: #b32e22;
  --red-pressed: #9f291f;
  --white: #fff;
  --line: #d8d9d1;
  --muted: #60655d;
  --surface: #eae9e2;
  --surface-raised: #fcfbf8;
  --dark-surface: #272a24;
  --dark-raised: #32362e;
  --on-dark-muted: #c3c9bc;
  --focus: #b32e22;
  --type-hero: clamp(3.25rem, 2.2rem + 4.6vw, 7rem);
  --type-section: clamp(2.125rem, 1.45rem + 2.25vw, 3.5rem);
  --type-editorial: clamp(2.375rem, 1.6rem + 2.5vw, 4rem);
  --type-card: clamp(1.375rem, 1.25rem + 0.25vw, 1.625rem);
  --type-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --type-small: 0.8125rem;
  --type-caption: 0.75rem;
  --radius-control: 4px;
  --radius-dialog: 12px;
  --dialog-padding: 24px;
  --radius-dialog-inner: max(0px, calc(var(--radius-dialog) - var(--dialog-padding)));
  --shadow-card:
    0 1px 2px rgb(24 29 21 / 7%), 0 8px 22px -8px rgb(24 29 21 / 14%),
    0 22px 48px -22px rgb(24 29 21 / 18%);
  --shadow-dialog:
    0 0 0 1px rgb(24 29 21 / 8%), 0 6px 16px -6px rgb(24 29 21 / 14%),
    0 30px 80px -20px rgb(24 29 21 / 26%);
  --shadow-toast: 0 2px 6px rgb(24 29 21 / 10%), 0 12px 28px -8px rgb(24 29 21 / 18%);
  --duration-quick: 140ms;
  --duration-reveal: 220ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: 1.6;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  margin: 0;
}
button,
a,
summary,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
[role="button"] {
  touch-action: manipulation;
}
h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
}
p,
li,
figcaption {
  text-wrap: pretty;
}
img,
svg {
  display: block;
}
img {
  max-width: 100%;
}
a {
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
button,
input,
select {
  border-radius: var(--radius-control);
}
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
:where(a, button, summary, input, select) {
  scroll-margin-block: 100px;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--red);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  :where(a, button, input, select, summary, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
  }
}