/*
 * Afak design-system reference.
 * This file owns the approved homepage boundary, surface, typography-adjacent
 * geometry, safe-area, viewport, and card formulas. Do not approximate values.
 * Detailed evidence and component contracts: DESIGN_SYSTEM_AUDIT.md.
 */
:root {
  --design-boundary-x: 18px;
  --page-padding-x: var(--design-boundary-x);
  --active-highlight-inset: 8px;
  --plaza-bar-height: 48px;
  --plaza-background: #000000;
  --plaza-surface: #1C1C1E;
  --plaza-ink: #FFFFFF;
  --ooxme-button-blue: #0A84FF;
  --plaza-card-padding: 24px;
  --plaza-icon-artwork-inset: 2px;
  --icon-primary-size: 22px;
  --icon-secondary-size: 14px;
  --plaza-card-radius: clamp(42px, 6vw, 72px);
  --plaza-card-top-clearance: calc(var(--design-boundary-x) + 22px + var(--design-boundary-x));
  --plaza-plus-size: 40px;
  --plaza-vv-width: 100vw;
  --plaza-vv-height: 100dvh;
  --plaza-bottom-anchor: var(--design-boundary-x);
  --plaza-card-gap: max(0px, calc((var(--plaza-vv-height) - var(--plaza-hero-card-height)) / 2 + 2px));
  --plaza-tile-stack-height: calc((5 * var(--plaza-hero-card-height)) + (4 * var(--plaza-card-gap)));
  --plaza-scroll-range: calc(var(--plaza-tile-stack-height) + (2 * var(--plaza-card-gap)) - var(--plaza-bottom-anchor) + (2 * var(--design-boundary-x)));
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --page-inset-top: calc(var(--design-boundary-x) + var(--safe-area-top));
  --page-inset-right: calc(var(--design-boundary-x) + var(--safe-area-right));
  --page-inset-left: calc(var(--design-boundary-x) + var(--safe-area-left));
  --plaza-content-height: min(calc((var(--plaza-vv-width) - (2 * var(--design-boundary-x))) * 1.25), calc(var(--plaza-vv-height) - var(--plaza-bottom-anchor) - var(--plaza-card-top-clearance)));
  --plaza-hero-card-height: var(--plaza-content-height);
}