/* Hallmark · macrostructure: Workbench · tone: utilitarian
 * theme: custom (vibe: "night hangar, manila ticket, aviation beacon")
 * paper: oklch(86% 0.062 88) · accent: oklch(62% 0.195 38) beacon
 * display: Unbounded · body: Onest · data: JetBrains Mono
 * axes: mid / geometric-sans / warm
 * audience: Zhukovsky walk-in · use: call or arrive · genre: editorial
 */

:root {
  --color-night: oklch(13% 0.018 250);
  --color-night-2: oklch(17% 0.02 250);
  --color-ticket: oklch(86% 0.062 88);
  --color-ticket-2: oklch(81% 0.07 86);
  --color-ink: oklch(18% 0.024 55);
  --color-ink-soft: oklch(28% 0.03 55);
  --color-paper: oklch(94% 0.018 95);
  --color-beacon: oklch(62% 0.195 38);
  --color-beacon-ink: oklch(18% 0.04 40);
  --color-copper: oklch(62% 0.08 70);
  --color-focus: oklch(62% 0.195 38);
  --color-rule: oklch(18% 0.024 55 / 0.22);
  --color-rule-night: oklch(94% 0.018 95 / 0.16);

  --font-display: "Unbounded", "Arial Narrow", sans-serif;
  --font-body: "Onest", "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, monospace;

  --text-display: clamp(2.75rem, 7vw, 6rem);
  --text-display-s: clamp(1.75rem, 4vw, 3rem);
  --text-xl: clamp(1.35rem, 2.4vw, 1.85rem);
  --text-lg: 1.25rem;
  --text-md: 1.0625rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.75rem;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  --space-sm: var(--space-8);
  --space-md: var(--space-16);
  --space-lg: var(--space-32);
  --space-xl: var(--space-64);

  --page: min(1200px, calc(100% - 48px));
  --measure: 66ch;
  --radius-tool: 2px;
  --radius-none: 0;

  --ease-out: cubic-bezier(0.56, 0, 0.35, 0.98);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 280ms;
  --dur-slow: 640ms;

  --line: 1px;
  --shift: cubic-bezier(0.56, 0, 0.35, 0.98);
  --arrive: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 720px) {
  :root {
    --page: min(1200px, calc(100% - 32px));
  }
}