/* The 3.0 app's design tokens (Theme.swift) for the page. tokens.js carries the same numbers for
   the headset canvas; change both together. The photography is the colour; UI is white on glass. */

:root {
  color-scheme: dark;

  /* Colour */
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.70);
  --ink-3: rgba(255, 255, 255, 0.50);
  --on-accent: rgba(0, 0, 0, 0.88);
  --accent: #fff;
  --hairline: rgba(255, 255, 255, 0.12);
  --glass: rgba(30, 32, 36, 0.55);
  --glass-strong: rgba(22, 23, 27, 0.78);
  /* Sheets and the tab bar: thick enough that the page never reads through, blur or no blur. */
  --glass-thick: rgba(24, 25, 29, 0.94);
  --glass-hover: rgba(60, 62, 68, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-filter: saturate(1.4) blur(36px);
  --toggle-tint: rgba(255, 255, 255, 0.6);
  --room: #000;

  /* Type: SF Pro on Apple devices, Inter elsewhere. 400 / 500 / 600 only. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, InterVariable, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* desktop sizes; the phone sizes come in below 700 px, and the range between is interpolated */
  --fs-display: clamp(40px, calc(22px + 2.92vw), 64px);
  --fs-screen: clamp(32px, calc(26px + 0.98vw), 40px);
  --fs-tile: clamp(24px, calc(21px + 0.49vw), 28px);
  --fs-card: clamp(19px, calc(17px + 0.37vw), 22px);
  --fs-shelf: var(--fs-card);
  --fs-eyebrow: 12px;
  --fs-body: clamp(16px, calc(15.3px + 0.12vw), 17px);
  --fs-meta: clamp(14px, calc(13.3px + 0.12vw), 15px);
  --fs-footnote: clamp(12px, calc(11.3px + 0.12vw), 13px);
  --track-eyebrow: 0.125em;

  /* Space and shape */
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 12px;
  --s-l: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --page: clamp(20px, calc(4px + 2.5vw), 40px);
  --gutter: 20px;
  --shelf-gap: 40px;
  --r-postcard: 16px;
  --r-tile: 20px;
  --r-hero: 28px;
  --r-pill: 999px;
  --content-max: 1680px;

  /* The scrim over imagery: black eased 0 -> 60% over the bottom 60% */
  --scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.168) 61%, rgba(0, 0, 0, 0.432) 82%, rgba(0, 0, 0, 0.6) 100%);
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 14px rgba(0, 0, 0, 0.32);

  /* Motion */
  --t-quick: 0.2s;
  --ease-quick: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-settle: 0.45s;
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-quick: 0.3s;
    --t-settle: 0.3s;
    --ease-settle: ease-in-out;
  }
}

/* The nine text styles */
.t-display { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
.t-screen { font-size: var(--fs-screen); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.t-tile { font-size: var(--fs-tile); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.t-card { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
.t-shelf { font-size: var(--fs-shelf); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
.t-eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow); line-height: 1.3; text-transform: uppercase; }
.t-body { font-size: var(--fs-body); font-weight: 400; line-height: 1.5; max-width: 62ch; }
.t-meta { font-size: var(--fs-meta); font-weight: 400; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.t-footnote { font-size: var(--fs-footnote); font-weight: 400; line-height: 1.4; color: var(--ink-3); }