/* ============================================================
   booth — design tokens
   ============================================================ */

:root {
  /* Color */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #b8b8b8;
  --color-well: #1a1a1a;
  --color-well-text: #ffffff;

  /* Font */
  --font-sans: "Inter", sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Page type */
  --type-wordmark-size: 35pt;
  --type-wordmark-weight: var(--weight-black);
  --type-wordmark-tracking: -0.05em;

  --type-tagline-size: 24pt; /* −2pt */
  --type-tagline-weight: var(--weight-black);
  --type-tagline-tracking: -0.05em;

  --type-nav-size: 10pt; /* −2pt */
  --type-nav-weight: var(--weight-semibold);
  --type-nav-tracking: 0;

  --type-date-tracking: 0;

  --type-meta-size: calc(14px - 2pt); /* −2pt */
  --type-meta-weight: var(--weight-bold);
  --type-meta-tracking: 0;
  --type-meta-color: var(--color-text-muted);

  --footer-row-gap: calc(4px + 3pt);

  /* App Store badge */
  --store-badge-height: calc(40px + 15pt);

  /* Page layout */
  --inset-home-side: 32px;
  --inset-camera-side: 16px;
  --gap-wordmark-to-viewport: 56px;
  --inset-reserved-bottom: 16px;
  --page-pad-x: clamp(32px, 5.5vw, 72px);
  --page-pad-y: clamp(36px, 5vh, 56px);
  /* Stack only when side CTA + inset + well no longer fit */
  --layout-stack-max: 940px;
  --layout-cta-well-inset: clamp(28px, 3vw, 48px);

  /* Camera / log well — locked design size (app tokens) */
  --well-design-w: 395px;
  --well-design-h: 645px; /* aspect ≈ 0.612 */
  --well-scale: 0.688905; /* 0.6561 × 1.05 */
  --well-radius: 42px;
  --well-top-inset: 28px;
  --well-location-nudge: 5pt; /* −1pt up */
  --well-bottom-inset: 32px;
  --well-side-inset: 20px;
  --well-caption-time-gap: calc(2px - 1pt);

  /* Well overlay */
  --well-type-size: 16px;
  --well-type-weight: var(--weight-bold);
  --well-type-time-weight: var(--weight-regular);
  --well-type-tracking: -0.02em; /* −2% all well text */

  --well-text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.28);

  /* Strip — design size matches well; display scale shared via --well-scale */
  --strip-fill: #ffffff;
  --strip-ink: #1a1a1a;
  --strip-cell-radius: 16px;
  --strip-slot-gap: 4px;
  --strip-grid-inset: 4px;
  --strip-grid-to-title: 40px;
  --strip-title-to-date: 3px;
  --strip-date-to-bottom: 10px;
  --strip-footer-inset-x: 8px;
  --strip-title-size: 14px;
  --strip-title-weight: var(--weight-semibold);
  --strip-date-size: 13px;
  --strip-date-weight: var(--weight-regular);
  --strip-date-opacity: 0.9;
  --strip-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  --strip-slot-placeholder: #000000;
  --artifact-flip-ms: 800ms;
  --strip-hold-ms: 10000;
}