/**
 * Prime Exhibits design tokens.
 *
 * The single source of truth for brand values. Every rule in style.css reads from here;
 * nothing below this file redefines a colour, font, or spacing value literally.
 */

@font-face {
  font-family: "PE Display";
  src: url("fonts/arial-rounded-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour. #80e0b4 is the brand green — the only one. --pe-mint-deep is not a brand
     colour: it is a darkened derivative for small text and icons on light surfaces, where
     the brand green itself falls to roughly 1.7:1 contrast. */
  --pe-mint: #80e0b4;
  --pe-mint-deep: #147a52;
  --pe-ink: #0e1411;
  --pe-muted: #5b635d;
  --pe-faint: #9aa39c;
  --pe-line: #e7ebe8;
  --pe-surface: #ffffff;
  --pe-wash: #f6f8f6;
  --pe-veil: rgba(255, 255, 255, .92);
  /* Shared glass surface: the header and the panels that hang off it. */
  --pe-glass: rgba(255, 255, 255, .82);
  /* Dark glass for the header and its menus: same blur, ink instead of paper. */
  --pe-glass-dark: rgba(14, 20, 17, .72);
  --pe-veil-dark: rgba(14, 20, 17, .92);
  /* --pe-glass-dark composited over the page: the bar's rendered tone. Panels use it at 90%
     with the blur, so they read as the bar's colour over any backdrop but keep the glass. */
  --pe-panel-dark: rgba(81, 85, 83, .9);
  --pe-line-dark: rgba(255, 255, 255, .14);
  --pe-text-on-dark: #ffffff;
  --pe-muted-on-dark: rgba(255, 255, 255, .72);
  /* Dark counterpart, for surfaces that carry the brand green as text. */
  --pe-scrim: rgba(14, 20, 17, .72);
  /* Review stars keep the amber every rating widget uses, so a five-star row reads as a
     rating at a glance rather than as brand decoration. */
  --pe-star: #fbbc04;

  /* Type */
  --pe-font-display: "PE Display", "Arial Rounded MT Bold", Arial, sans-serif;
  --pe-font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pe-text-eyebrow: 1rem;
  --pe-text-body: 17px;
  --pe-display-1: clamp(2.7rem, 4vw, 4rem);
  --pe-display-2: clamp(2.2rem, 4vw, 3.5rem);
  --pe-display-3: clamp(2.1rem, 3.4vw, 3.1rem);

  /* Space */
  --pe-space-1: .5rem;
  --pe-space-2: 1rem;
  --pe-space-3: 1.5rem;
  --pe-space-4: 2rem;
  --pe-space-5: 3rem;
  --pe-space-6: 4rem;
  --pe-space-7: 5rem;
  --pe-space-8: 7rem;

  /* Shape and layout */
  /* Pill buttons everywhere: label-hugging padding, one token for the whole site. */
  --pe-pill-pad: 11px 18px;
  --pe-radius-sm: 3px;
  --pe-radius-pill: 999px;
  --pe-content: 1240px;
  --pe-content-wide: 1560px;
  --pe-header-height: 78px;
  /* The header's full box: content plus its 1px bottom border. Anything sizing itself
     against the header must subtract this, not --pe-header-height. */
  --pe-header-total: 78px;
  --pe-shadow-float: 0 12px 32px rgba(14, 20, 17, .08);
  --pe-blur: blur(16px);
  --pe-glass-filter: saturate(180%) blur(16px);

  /* Motion */
  --pe-ease: cubic-bezier(.2, .6, .3, 1);
  --pe-duration: .22s;
  /* Hover/focus feedback everywhere on the site: the homepage button timing, made a token.
     Every colour, background, border, transform, and reveal on interaction uses --pe-hover. */
  --pe-hover-duration: .2s;
  --pe-hover: var(--pe-hover-duration) var(--pe-ease);
}