/* Urban QR — generated from tokens.json */
:root, [data-theme="light"] {
  --plate-100: #f5f3ee; /* Page background: the build plate. Default ground for every page and the generator canvas. */
  --plate-200: #ffffff; /* Raised surfaces on plate-100: cards, fields, the generator side panel. */
  --plate-000: #eae7df; /* Sunken wells: segmented-control tracks, code/spec blocks, the empty Tetris well. */
  --ink: #1d2024; /* Primary text and icons on plate-000, plate-100 and plate-200. Fill of the primary button. The QR finder eyes. */
  --logo-tile: #f5f3ee00; /* Ground behind the logo mark: none in Print studio; a light tile in Night build, because the mark's navy outline disappears on dark plates. */
  --ink-muted: #585d65; /* Secondary text, captions, mono spec values on any plate. */
  --ink-faint: #676c74; /* Placeholders and disabled labels on plate-100 and plate-200 only (fails 4.5:1 on plate-000 in light). */
  --on-ink: #f5f3ee; /* Text and icons on an ink fill (primary button, dark tooltip). */
  --line: #dcd8ce; /* Decorative hairlines and dividers. Never the only boundary of a control. */
  --line-strong: #8a8578; /* Control borders (fields, chips, quiet buttons) and the empty-module dots: 3:1 on plate-100 and plate-200. */
  --block-blue: #3d6fa8; /* Houses (low buildings). The workhorse block colour: most of any city, most of any illustration. */
  --block-blue-shade: #2c5282; /* Side face of a blue block in iso and 3D illustrations. */
  --on-blue: #ffffff; /* Text on block-blue. */
  --block-yellow: #f2c230; /* Mid-rise towers. Highlight colour: the selected state, the 'new' tag, the falling piece. */
  --block-yellow-shade: #c49a1f; /* Side face of a yellow block in illustrations. */
  --on-yellow: #1d2024; /* Text on block-yellow, both themes. */
  --block-orange: #f08a2c; /* Apartment blocks. The brand's warm signature: the one block button per view, active step, progress fill. */
  --block-orange-shade: #c46a1c; /* Side face of an orange block; pressed state of the block button. */
  --on-orange: #1d2024; /* Text on block-orange, both themes. */
  --block-red: #c93c38; /* Skyscrapers: the tallest pieces of a city. Use sparingly as the peak of a composition, never for errors. */
  --block-red-shade: #9e2c29; /* Side face of a red block in illustrations. */
  --on-red: #ffffff; /* Text on block-red. */
  --block-green: #2f8545; /* Parks and churches: small, rare accents in a city. Use rarely in UI. */
  --block-green-shade: #23663a; /* Side face of a green block in illustrations. */
  --on-green: #ffffff; /* Text on block-green. */
  --block-pink: #bf78ad; /* Landmarks (the odd one out). One per composition at most. */
  --block-pink-shade: #93537f; /* Side face of a pink block in illustrations. */
  --on-pink: #1d2024; /* Text on block-pink, both themes. */
  --link: #2b5a91; /* Inline links on any plate. */
  --focus: #2b5a91; /* The 2px solid focus ring, offset 2px, on every interactive element. At least 3:1 on all plates. */
  --ok: #2d7240; /* Success text and icons ('Scan verified'), always with a word or icon. */
  --danger: #b3302c; /* Errors ('This QR won't scan at this size'), always with a word or icon. Not block-red. */
  --shadow-block: 0 3px 0 0 #1d2024; /* Block buttons and selected chips: the piece has thickness. Drops to 0 when pressed. */
  --shadow-card: 0 1px 0 0 #dcd8ce, 0 8px 24px -12px rgba(29, 32, 36, 0.22); /* Cards on plate-100. */
  --shadow-lift: 0 24px 48px -16px rgba(29, 32, 36, 0.28); /* The 3D viewer, popovers, the hero render. */
}
[data-theme="dark"] {
  --plate-100: #232528;
  --plate-200: #2d3034;
  --plate-000: #1b1d1f;
  --ink: #f2efe8;
  --logo-tile: #f5f3ee;
  --ink-muted: #b6b2a9;
  --ink-faint: #9d9a92;
  --on-ink: #1d2024;
  --line: #3a3d42;
  --line-strong: #7a7e85;
  --block-blue: #5b8cc6;
  --block-blue-shade: #416ea3;
  --on-blue: #1d2024;
  --block-yellow: #f4cb4a;
  --block-yellow-shade: #c9a233;
  --on-yellow: #1d2024;
  --block-orange: #f39a47;
  --block-orange-shade: #c97a31;
  --on-orange: #1d2024;
  --block-red: #e8625c;
  --block-red-shade: #b8463f;
  --on-red: #1d2024;
  --block-green: #58ad69;
  --block-green-shade: #408a51;
  --on-green: #1d2024;
  --block-pink: #cc8dbb;
  --block-pink-shade: #a46a95;
  --on-pink: #1d2024;
  --link: #93b9e8;
  --focus: #93b9e8;
  --ok: #6cc07e;
  --danger: #f07a73;
  --shadow-block: 0 3px 0 0 #0e0f10;
  --shadow-card: 0 1px 0 0 #3a3d42, 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}
:root {
  --space-1: 4px; /* Half module: icon-to-label gap, seams between blocks. */
  --space-2: 8px; /* One module: gaps inside chips and tags. */
  --space-3: 12px; /* Field padding (vertical), list row gaps. */
  --space-4: 16px; /* Field padding (horizontal), card padding on mobile, page gutter on phones. */
  --space-6: 24px; /* Card padding, gap between form fields. */
  --space-8: 32px; /* Gap between cards and panel sections. */
  --space-12: 48px; /* Section padding inside a page block. */
  --space-16: 64px; /* Gap between product-site sections on mobile. */
  --space-24: 96px; /* Gap between product-site sections on desktop. */
  --radius-0: 0px; /* Blocks, modules, tags: anything that is a piece of the city. */
  --radius-1: 3px; /* Buttons, fields, chips: a printed part's slight chamfer. */
  --radius-2: 8px; /* Cards and panels. */
  --radius-plate: 16px; /* The build-plate frame: hero media, the 3D viewer, product photos. */
  --font-sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --text-display-xl: 700 72px/72px var(--font-sans); /* Hero headline, one per page. */
  --text-display-l: 700 48px/52px var(--font-sans); /* Section openers on the product site. */
  --text-heading-1: 600 32px/38px var(--font-sans); /* Page titles in the generator, card titles in feature rows. */
  --text-heading-2: 600 22px/28px var(--font-sans); /* Panel and card headings. */
  --text-body-l: 400 18px/28px var(--font-sans); /* Lead paragraphs on the product site. */
  --text-body: 400 16px/24px var(--font-sans); /* Default reading text. */
  --text-body-s: 400 14px/20px var(--font-sans); /* Helper text, captions, dense UI. */
  --text-button: 600 15px/20px var(--font-sans); /* Button and chip labels. */
  --text-mono-label: 700 12px/16px var(--font-mono); /* Eyebrows, field labels, tags. Always set in UPPERCASE. */
  --text-spec: 400 13px/20px var(--font-mono); /* Print specs, dimensions, file names, SSIDs. */
  --text-numeral: 700 40px/44px var(--font-mono); /* Big counters: modules, blocks, print time, progress. */
}
.display-xl {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 72px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.display-l {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 52px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.heading-1 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.heading-2 {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-l {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.mono-label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.spec {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.numeral {
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
}