/**
 * VIWA design tokens — bento editorial landing (1440×1409 canonical pixels).
 * Row heights scale 768→1440 via clamp; column/bento/bottom ratios from 915px source × 1440/915.
 */
:root {
  --viwa-accent: #4a247d;
  --viwa-accent-hover: #593591;
  --viwa-accent-active: #3f2971;
  --viwa-accent-header-cta: #412f6b;
  --viwa-accent-header-cta-hover: #4d3a7a;
  --viwa-accent-header-cta-active: #362659;
  --viwa-bg: #000000;
  --viwa-bg-elevated: #0a0a0a;
  --viwa-bg-panel: #111111;
  --viwa-bg-light-cell: #e8e8e8;
  --viwa-text: #ffffff;
  --viwa-text-on-light: #111111;
  --viwa-muted: #a0a0a0;
  /* R5 remediation: sampled ref medians (role-specific, not global white) */
  --viwa-text-ref-primary: #d0d0d0;
  --viwa-text-ref-nav: #787878;
  --viwa-text-ref-sub: #787878;
  --viwa-text-ref-feature: #7e7e7e;
  --viwa-text-ref-bottom-title: #787878;
  --viwa-text-ref-bottom-line: #787878;
  /* R5-A1: small meaningful text on #000 (eyebrow + bottom links only) */
  --viwa-accent-text-on-dark: #9b7cc8;
  --viwa-accent-text-on-dark-hover: #b08fd4;
  --viwa-border: #333333;
  --viwa-focus: #4a247d;
  --viwa-error: #ff6b6b;
  --viwa-btn-text: #ffffff;

  --viwa-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --viwa-font-display: var(--viwa-font-ui);
  --viwa-font-condensed: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', 'Franklin Gothic Medium', Arial, sans-serif;

  --viwa-radius-sm: 4px;
  --viwa-radius-md: 4px;
  --viwa-radius-lg: 4px;

  --viwa-space-xs: 0.5rem;
  --viwa-space-sm: 0.75rem;
  --viwa-space-md: 1rem;
  --viwa-space-lg: 1.5rem;
  --viwa-space-xl: 2rem;
  --viwa-space-2xl: 3rem;

  --viwa-touch-min: 44px;

  /* Canonical reference (915×903 source → 1440 desktop) */
  --viwa-ref-width: 1440px;
  --viwa-ref-source-width: 915px;
  --viwa-canonical-scale: 1.573770; /* 1440 / 915 */
  --viwa-above-fold: 1409px; /* 118 + 855 + 104 + 332 */
  --viwa-split-breakpoint: 1024px;
  --viwa-mobile-breakpoint: 768px;
  --viwa-desk-scale-breakpoint: 1025px;

  /* Responsive viewport clamp for row interpolation (768 → 1440) */
  --viwa-vw-clamp: min(100vw, var(--viwa-ref-width));
  --viwa-row-scale: calc((var(--viwa-vw-clamp) - 768px) / (1440px - 768px));

  /* Board row heights: 768 ≈ legacy compact, 1440 = measured canonical */
  --viwa-header-height-min: 68px;
  --viwa-header-height-max: 118px;
  --viwa-hero-height-min: 531px;
  --viwa-hero-height-max: 855px;
  --viwa-feature-height-min: 66px;
  --viwa-feature-height-max: 104px;
  --viwa-bottom-height-min: 202px;
  --viwa-bottom-height-max: 332px;

  --viwa-header-height: clamp(
    var(--viwa-header-height-min),
    calc(var(--viwa-header-height-min) + (var(--viwa-header-height-max) - var(--viwa-header-height-min)) * var(--viwa-row-scale)),
    var(--viwa-header-height-max)
  );
  --viwa-hero-height: clamp(
    var(--viwa-hero-height-min),
    calc(var(--viwa-hero-height-min) + (var(--viwa-hero-height-max) - var(--viwa-hero-height-min)) * var(--viwa-row-scale)),
    var(--viwa-hero-height-max)
  );
  --viwa-feature-height: clamp(
    var(--viwa-feature-height-min),
    calc(var(--viwa-feature-height-min) + (var(--viwa-feature-height-max) - var(--viwa-feature-height-min)) * var(--viwa-row-scale)),
    var(--viwa-feature-height-max)
  );
  --viwa-bottom-height: clamp(
    var(--viwa-bottom-height-min),
    calc(var(--viwa-bottom-height-min) + (var(--viwa-bottom-height-max) - var(--viwa-bottom-height-min)) * var(--viwa-row-scale)),
    var(--viwa-bottom-height-max)
  );

  /* Hero board columns @1440: 527 / 414 / 499 px (source 335 / 263 / 317 fr) */
  --viwa-col-hero: 335fr;
  --viwa-col-mid: 263fr;
  --viwa-col-wide: 317fr;

  /* Bento rows within hero: 365 / 489 px (232 / 311 fr; +1px absorbed by grid) */
  --viwa-bento-row-top: 232fr;
  --viwa-bento-row-bottom: 311fr;

  /* Bottom quad @1440: 335 / 307 / 523 / 275 px (213 / 195 / 332 / 175 fr) */
  --viwa-bottom-bubble: 213fr;
  --viwa-bottom-science: 195fr;
  --viwa-bottom-station: 332fr;
  --viwa-bottom-rhythm: 175fr;

  /* Desktop internal scale (1025 → 1440): 1.0 at tablet, canonical scale at 1440 */
  --viwa-desk-progress: clamp(0, calc((var(--viwa-vw-clamp) - 1025px) / (1440px - 1025px)), 1);
  --viwa-desk-scale: calc(1 + (var(--viwa-canonical-scale) - 1) * var(--viwa-desk-progress));

  /* Hero logo source raster (manifest); display box scales on desktop */
  --viwa-hero-logo-src-width: 277px;
  --viwa-hero-logo-src-height: 150px;

  --viwa-shadow-panel: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --viwa-motion-duration: 0.01ms;
  }
}