/* Zboruri design tokens + base. Monochrome canvas, white tiles, near-black ink, one accent. */

:root {
  color-scheme: light;

  /* Type */
  --font-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo', 'Instrument Sans', system-ui, sans-serif; /* always with font-stretch: 125% */

  /* Neutrals */
  --canvas: #efeff1;        /* page background */
  --tile: #ffffff;          /* bento tiles, cards */
  --sunk: #f3f3f5;          /* fields, chips, segmented controls inside white tiles */
  --line: #e4e4e8;          /* hairlines only */
  --ink: #111113;
  --ink-2: #55555c;
  --ink-3: #8e8e96;
  --ink-4: #c4c4ca;         /* disabled, map dots */
  --black: #111113;         /* primary buttons, orbs, dark tiles */
  --charcoal: #1c1c1f;      /* dark tile */

  /* The one accent: ultramarine. To go orange instead, set --accent:#ff8a00 and --on-accent:#111113. */
  --accent: #2b2be0;
  --accent-soft: #e8e8fc;
  --on-accent: #ffffff;

  /* Colour-block tiles, for fallback art and one or two tiles only */
  --clay: #cf6a52;
  --fog: #c9ced9;
  --sand: #e4dccf;

  /* Price tiers: text and dots only */
  --cheap: #1f8a55;
  --mid: #a86a12;
  --high: #b8452f;

  /* Type scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --fs-price: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --fs-wordmark: clamp(3.5rem, 14.5vw, 12.5rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --bento-gap: 12px;
  --frame-inset: clamp(8px, 1vw, 16px);
  --section-gap: clamp(3rem, 2rem + 3vw, 5.5rem);
  --container: 80rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Radii, nested concentrically */
  --r-frame: 32px;
  --r-tile: 28px;
  --r-card: 20px;
  --r-inner: 14px;
  --r-pill: 999px;

  /* One shadow, only for things that float */
  --shadow-float: 0 1px 2px rgb(17 17 19 / 0.06), 0 16px 40px -16px rgb(17 17 19 / 0.22);

  /* Motion */
  --t-fast: 150ms;
  --t-base: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--fs-base) / 1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { background-color: var(--ph, transparent); }
button:disabled { cursor: default; }

/* Components set their own display; `hidden` must still win. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tile--dark :focus-visible,
.tile--accent :focus-visible { outline-color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.125em; height: 1.125em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--ink-3); }

.skip-link { position: absolute; z-index: 90; left: var(--gutter); top: -4rem; padding: var(--space-2) var(--space-4); border-radius: var(--r-pill); background: var(--black); color: #fff; }
.skip-link:focus { top: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
}