/*
 * Responsive design tokens — single source of truth for layout, spacing, and scale.
 *
 * Width bands (html[data-layout], site/js/responsive.js):
 *   phone   — width < 768px
 *   tablet  — 768px – 1279px
 *   desktop — width >= 1280px
 *
 * Viewport profiles (html[data-profile]) — width + height + aspect, not width alone:
 *   baseline     — vw >= 1920 AND vh >= 1080 (protected source of truth)
 *   wide-tall    — wide (>= 1280) with sufficient height
 *   wide-short   — wide (>= 1280) but short (vh < 900), e.g. 1280×800
 *   compact-wide — tablet / phone landscape
 *   compact-tall — tablet / phone portrait
 *   minimal      — very small phones (<= 360px wide or similar)
 *
 * Pages choose their own scene/layout strategy; profiles supply shared inputs only.
 */

:root {
  /* Reference viewport (desktop composition) */
  --ref-width: 1920;
  --ref-height: 1080;

  /* Profile thresholds (mirror site/js/responsive.js) */
  --profile-baseline-min-width: 1920;
  --profile-baseline-min-height: 1080;
  --profile-desktop-min-width: 1280;
  --profile-tablet-min-width: 768;
  --profile-short-max-height: 900;
  --profile-minimal-max-width: 360;

  /* Breakpoints (width bands — legacy/shared CSS) */
  --bp-phone-max: 767px;
  --bp-tablet-min: 768px;
  --bp-desktop-min: 1280px;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Page spacing */
  --space-page-x: clamp(12px, 3vw, 28px);
  --space-chrome-gap: clamp(10px, 1.2vw, 18px);
  --space-content-title-gap: clamp(12px, 1.5vw, 20px);

  /* Header / site chrome (aliases keep older names working) */
  --header-logo-w: 140px;
  --header-logo-h: 56px;
  --header-logo-gap: 18px;
  --header-logo-top: calc(12px + var(--safe-top));
  --header-logo-left: calc(12px + var(--safe-left));
  --page-title-top: calc(var(--header-logo-top) + var(--header-logo-h) + var(--header-logo-gap));
  --site-logo-w: var(--header-logo-w);
  --site-logo-h: var(--header-logo-h);
  --site-logo-ref-w: var(--site-logo-w);
  --site-logo-ref-h: var(--site-logo-h);
  --site-logo-gap: var(--header-logo-gap);
  --site-logo-top: var(--header-logo-top);
  --site-logo-left: var(--header-logo-left);
  --page-pad-x: var(--space-page-x);

  /* Content regions — JS overrides --content-top when a fixed title is measured */
  --content-top: 184px;
  --content-bottom: clamp(56px, 10vh, 84px);

  /* Available content area (JS sets --content-height in px; CSS fallback below) */
  --chrome-prompt-h: 18px;
  --chrome-mixer-h: 0px;
  --chrome-has-mixer: 0;
  --chrome-bottom-reserve: calc(
    var(--prompt-bottom-offset) + var(--safe-bottom) + var(--chrome-prompt-h) + 8px
  );
  --content-height: calc(100vh - var(--content-top) - var(--chrome-bottom-reserve));
  --available-width: calc(100vw - var(--safe-left) - var(--safe-right));
  --viewport-width: 100vw;
  --viewport-height: 100vh;
  --viewport-aspect: 1.777;

  /* Bottom prompt stack (JS sets --prompt-h per page) */
  --prompt-bottom-offset: clamp(12px, 1.4vw, 18px);
  --prompt-edge-pad: 12px;
  --prompt-fit-min: 0.76;
  --chrome-stack-gap: 12px;
  --chrome-row-gap: 16px;
  --chrome-fit-safety: 12px;
  --chrome-controls-row-h: 44px;
  --chrome-prompt-available-w: 100vw;
  --chrome-prompt-slot-left: 12px;
  --chrome-layout: inline;
  --prompt-text-scale: 1;
  --prompt-fit: 1;
  --prompt-h: 18px;

  /* Controls & touch */
  --control-size: clamp(36px, 4vw, 44px);
  --touch-target-min: 44px;

  /* Tooltips (JS may set --tooltip-w/h on gallery) */
  --tooltip-w: clamp(240px, 28vw, 280px);
  --tooltip-h: clamp(180px, 24vh, 220px);

  /* Mini player */
  --mini-player-top: calc(6px + var(--safe-top));
  --mini-player-right: calc(10px + var(--safe-right));
  --mini-player-scale: 1;

  /* Overlay / back controls */
  --overlay-back-bottom: calc(var(--prompt-bottom-offset) + var(--safe-bottom));

  /* Character dialogue overlay — fluid viewport margins (baseline box size unchanged) */
  --vn-viewport-pad-x: clamp(12px, 2.5vw, 24px);
  --vn-viewport-pad-y: clamp(12px, 2.5vh, 24px);
  --vn-stage-max-h: calc(
    100dvh - var(--vn-viewport-pad-y) - var(--vn-viewport-pad-y)
    - var(--safe-top) - var(--safe-bottom)
  );

  /* Site credit focus (room) */
  --type-site-credit-focus-mult: 3.25em;

  /* UI scale — 1 at baseline profile; JS sets on compact / short viewports.
     --chrome-text-scale multiplies section page titles on tablet/phone bands.
     --scene-scale is page-specific (sky only); not applied site-wide. */
  --ui-scale: 1;
  --chrome-text-scale: 1;
  --scene-scale: 1;

  /* Z-index scale */
  --z-art-hover: 3;
  --z-page-title: 15;
  --z-prompt: 20;
  --z-room-prompt: 25;
  --z-site-chrome: 110;
  --z-tooltip: 200;
  --z-lightbox: 240;
}

/* Tablet band */
html[data-layout="tablet"] {
  --header-logo-w: clamp(120px, 11vw, 140px);
  --header-logo-h: clamp(48px, 4.4vw, 56px);
  --header-logo-gap: 14px;
  --site-logo-w: var(--header-logo-w);
  --site-logo-h: var(--header-logo-h);
  --site-logo-gap: var(--header-logo-gap);
  --prompt-bottom-offset: 12px;
  --chrome-stack-gap: 14px;
  --mini-player-scale: 0.94;
  --type-site-credit-focus-mult: 2.35em;
}

/* Phone band */
html[data-layout="phone"] {
  --header-logo-w: clamp(104px, 27vw, 132px);
  --header-logo-h: clamp(42px, 11vw, 53px);
  --header-logo-gap: 12px;
  --site-logo-w: var(--header-logo-w);
  --site-logo-h: var(--header-logo-h);
  --site-logo-gap: var(--header-logo-gap);
  --prompt-bottom-offset: 12px;
  --chrome-stack-gap: 14px;
  --mini-player-scale: 0.88;
  --type-site-credit-focus-mult: 1.85em;
}

/* Wide but short desktop/laptop — shared chrome tightening (1280×800 class) */
html[data-profile="wide-short"] {
  --header-logo-gap: 12px;
  --site-logo-gap: 12px;
  --chrome-stack-gap: 12px;
  --content-bottom: clamp(52px, 9vh, 76px);
}

/* Short landscape viewports */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-logo-gap: 10px;
    --site-logo-gap: 10px;
    --chrome-stack-gap: 10px;
    --content-bottom: clamp(48px, 12vh, 72px);
  }
}