/*
 * Shared visual roles for every public route.
 * Font files stay in fonts.css; this file owns how the families are used.
 */

:root {
  /* Scene geometry always follows the small viewport. Runtime measurements
   * are published separately so mobile browser chrome cannot make a 100svh
   * scene taller than the visible frame. */
  --ok-viewport-height: 100svh;

  --ok-font-body: "Archivo", sans-serif;
  --ok-font-display: "Barlow Condensed", sans-serif;

  /*
   * Fluid semantic roles. The historic `*-min` names remain as compatibility
   * aliases because every public route consumes them, but their value now
   * follows the layout viewport height up to an explicit 8K ceiling. `vh` is
   * deliberate here: unlike `svh`, it updates deterministically after desktop
   * window resize while remaining stable across mobile browser chrome changes.
   * This keeps
   * physical reading size comparable on high-density desktop canvases while
   * preserving the 14/12 px mobile floors.
   */
  --ok-type-content-floor: 14px;
  --ok-type-label-floor: 12px;
  --ok-type-content: var(--ok-type-content-runtime, clamp(var(--ok-type-content-floor), 1.55vh, 48px));
  --ok-type-label: var(--ok-type-label-runtime, clamp(var(--ok-type-label-floor), 1.2vh, 32px));
  --ok-type-control: var(--ok-type-control-runtime, clamp(15px, 1.45vh, 42px));
  --ok-type-icon: var(--ok-type-icon-runtime, clamp(18px, 1.65vh, 44px));
  --ok-type-display-home: var(--ok-type-display-home-runtime, clamp(96px, 18vh, 720px));
  --ok-type-display-home-compact: var(--ok-type-display-home-compact-runtime, clamp(120px, 12.5vh, 360px));
  --ok-type-display-service: var(--ok-type-display-service-runtime, clamp(68px, 8.7vh, 360px));
  --ok-type-display-process: var(--ok-type-display-process-runtime, clamp(74px, 9.5vh, 392px));
  --ok-type-display-section: var(--ok-type-display-section-runtime, clamp(58px, 7.8vh, 320px));
  --ok-type-display-question: var(--ok-type-display-question-runtime, clamp(28px, 4.7vh, 192px));
  --ok-type-display-card: var(--ok-type-display-card-runtime, clamp(25px, 3.2vh, 128px));
  --ok-type-display-result: var(--ok-type-display-result-runtime, clamp(48px, 6vh, 240px));
  --ok-type-display-document: var(--ok-type-display-document-runtime, clamp(76px, 8.8vh, 360px));
  --ok-type-content-min: var(--ok-type-content);
  --ok-type-label-min: var(--ok-type-label);
  /* Barlow Condensed extends below its em box on Polish diacritics and on
   * descenders such as j/g/y. A shared display line box must therefore be at
   * least 1.2em on desktop; tighter route-owned values visibly intersect. */
  --ok-leading-display: 1.21;
  --ok-leading-content: 1.5;
  --ok-tracking-label: .08em;

  /* Rails grow with large canvases as well as the semantic display roles.
   * Keeping the old 1.2–1.6K caps while type continued to 8K forced headings
   * into many short lines and pushed actions outside their scene. */
  --ok-rail-opening: clamp(650px, 42vw, 3200px);
  --ok-rail-section: clamp(760px, 42vw, 2880px);
  --ok-rail-about: clamp(760px, 42vw, 2880px);
  --ok-rail-reading: clamp(560px, 32vw, 2400px);
  --ok-rail-wide: clamp(960px, 90vw, 3600px);

  --ok-color-paper: #ead9cb;
  --ok-color-navy: #071a2c;
  --ok-color-cream: #f0dfcf;
  --ok-color-accent: #ee4d78;
  --ok-color-accent-on-light: #b52454;
  --ok-color-accent-on-dark: #ee4d78;
  --ok-color-text-on-light: #071a2c;
  --ok-color-text-muted-on-light: #34424c;
  --ok-color-text-on-dark: #f0dfcf;
  --ok-color-text-muted-on-dark: #d2c2b4;

  --ok-space-content-gap: clamp(14px, 2.4vh, 22px);
  --ok-space-content-gap-compact: clamp(8px, 1.4vh, 14px);

  /* Shared interactive geometry grows with the same layout viewport that
   * drives the semantic type roles. Interactive stacks must not retain a
   * fixed 1K-era height while their copy grows on 2K/4K/8K canvases. */
  --ok-size-interactive-row: clamp(46px, 3.75vh, 150px);
  --ok-size-interactive-index: clamp(44px, 3.1vh, 128px);
  --ok-space-interactive-gap: clamp(6px, .65vh, 24px);
  --ok-space-interactive-inset: clamp(6px, .65vh, 24px);
  --ok-space-component-label-gap: clamp(2px, .25vh, 8px);
  --ok-space-flow-tight: clamp(8px, .65vh, 24px);

  --ok-scene-safe-inset: 24px;
  --ok-annotation-target-size: 44px;
  --ok-annotation-core-size: 22px;
  --ok-annotation-ring-size: 44px;
  --ok-annotation-copy-gap: 32px;
  --ok-annotation-bottom-inset: 88px;
  --ok-annotation-ui-clearance: 16px;
}

body {
  font-size: var(--ok-type-content);
}