/* ─────────────────────────────────────────────────────────────────────────────
   THE SCRAPCODE DESIGN SYSTEM — "Machine Cant / Forge".
   Near-black · brass · bone. Dark by default; light flips on [data-theme].

   Everything down to the SITE-LOCAL fence at the bottom is the design
   handoff's own token files, concatenated in its own order and otherwise
   VERBATIM:

     design_handoff_scrapcode_theme/tokens/colors.css
     design_handoff_scrapcode_theme/tokens/typography.css
     design_handoff_scrapcode_theme/tokens/spacing.css

   Verbatim on purpose. A re-export from Claude Design should be a paste over
   this region, so anything edited here is an edit that silently loses itself
   the next time the system ships. If a value here is wrong, fix it in the
   design system and re-export.

   `tokens/fonts.css` is the one file NOT inlined — it is a single
   @import of Google Fonts, and that request moved into the <head> of each
   page. See the note at the site-local fence for why.

   The rule this file exists to enforce, unchanged: styles.css must not
   contain a literal colour, font family or type size. If it does, the design
   system can no longer set that value, and the seam has stopped being a seam.
   ───────────────────────────────────────────────────────────────────────── */

/* ── tokens/colors.css ─────────────────────────────────────────────────── */
/* Scrapcode — "Forge" palette (Logo Exploration 2a): near-black · brass · bone.
   Base scale first, then semantic roles. Dark is the default (Carta's chrome
   stays out of the map's way); light flips via [data-theme="light"]. */
:root {
	/* base — void */
	--void-0: #0e0d0b;
	--void-1: #161512;
	--void-2: #1e1c18;
	--void-3: #2a2823;
	--void-4: #3a3731;
	/* base — bone */
	--bone-0: #f6f1e6;
	--bone-1: #f1ebdc;
	--bone-2: #e8dfc8;
	--bone-3: #d4c9ad;
	--bone-4: #bfb394;
	/* base — brass (same hue, lightness steps) */
	--brass-0: #e2c47a;
	--brass-1: #c9a24a;
	--brass-2: #a8852f;
	--brass-3: #7a5c14;
	/* base — gunmetal (ghost text, dividers) */
	--gun-1: #8a8f99;
	--gun-2: #6b6e74;
	--gun-3: #4d5057;
	/* base — states */
	--blood-1: #d4534e;
	--blood-2: #a13634;
	--moss-1: #8fb35a;
	--moss-2: #5c7d33;
	--ember-1: #d8a657;
	--ember-2: #9a6f2a;

	/* semantic — dark (default) */
	--bg: var(--void-0);
	--panel: var(--void-1);
	--panel-2: var(--void-2);
	--panel-glass: rgba(22, 21, 18, 0.94);
	--border: var(--void-3);
	--border-2: var(--void-4);
	--ink-0: var(--bone-2);
	--ink-1: #a89f8a;
	--ink-2: var(--gun-2);
	--accent: var(--brass-1);
	--accent-ink: var(--void-0);
	--accent-wash: rgba(201, 162, 74, 0.1);
	--accent-wash-2: rgba(201, 162, 74, 0.18);
	--accent-border: rgba(201, 162, 74, 0.45);
	--bad: var(--blood-1);
	--bad-wash: rgba(212, 83, 78, 0.14);
	--ok: var(--moss-1);
	--warn: var(--ember-1);
	--field-bg: #0b0a08;
	--shadow-panel: 0 8px 28px rgba(0, 0, 0, 0.45);

	/* player ink — Carta's 10 named slots, re-inked for the forge palette */
	--player-red: #d94a3d;
	--player-orange: #e07b2a;
	--player-yellow: #e2b83a;
	--player-green: #6fb04a;
	--player-cyan: #3aa8b8;
	--player-blue: #4a7fd6;
	--player-purple: #8a62d6;
	--player-magenta: #cf4f9e;
	--player-white: #e8dfc8;
	--player-black: #1a1815;
}

[data-theme="light"] {
	--bg: var(--bone-1);
	--panel: var(--bone-0);
	--panel-2: var(--bone-2);
	--panel-glass: rgba(246, 241, 230, 0.94);
	--border: var(--bone-3);
	--border-2: var(--bone-4);
	--ink-0: var(--void-0);
	--ink-1: #4d4839;
	--ink-2: var(--gun-2);
	--accent: var(--brass-3);
	--accent-ink: var(--bone-0);
	--accent-wash: rgba(122, 92, 20, 0.1);
	--accent-wash-2: rgba(122, 92, 20, 0.18);
	--accent-border: rgba(122, 92, 20, 0.45);
	--bad: var(--blood-2);
	--bad-wash: rgba(161, 54, 52, 0.12);
	--ok: var(--moss-2);
	--warn: var(--ember-2);
	--field-bg: #ffffff;
	--shadow-panel: 0 8px 28px rgba(60, 45, 20, 0.18);
}

/* ── tokens/typography.css ────────────────────────────────────────────── */
:root {
	--font-display: "Major Mono Display", "Share Tech Mono", monospace;
	--font-mono: "Share Tech Mono", ui-monospace, "JetBrains Mono", monospace;
	--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* scale — dense app chrome; the map is the big thing on screen */
	--text-2xs: 10px;
	--text-xs: 11px;
	--text-sm: 12px;
	--text-md: 13px;
	--text-base: 14px;
	--text-lg: 16px;
	--text-xl: 20px;
	--text-2xl: 28px;
	--text-3xl: 40px;

	--leading-tight: 1.1;
	--leading-normal: 1.45;
	--leading-relaxed: 1.6;

	/* mono labels are always tracked + uppercased */
	--tracking-label: 0.1em;
	--tracking-brand: 0.3em;
	--tracking-wide: 0.16em;
}

/* ── tokens/spacing.css ──────────────────────────────────────────────── */
:root {
	--space-1: 4px;
	--space-2: 6px;
	--space-3: 8px;
	--space-4: 10px;
	--space-5: 12px;
	--space-6: 16px;
	--space-7: 20px;
	--space-8: 24px;
	--space-9: 32px;
	--space-10: 48px;

	/* corners: squared-off. Scrapcode is machine-cant; the only round things are dots and swatches. */
	--radius-0: 0px;
	--radius-1: 2px;
	--radius-2: 3px;
	--radius-3: 4px;
	--radius-full: 999px;

	--panel-w: 260px;
	--panel-w-lg: 300px;
	--hit-min: 28px;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-fast: 120ms;
	--dur: 180ms;
}

/* ═════════════════════════════════════════════════════════════════════════
   SITE-LOCAL — below this fence is NOT from the design system.

   The system's own readme says of the umbrella site: "no screens yet; brand
   lockup only". So it ships a lockup and a palette, and it has no opinion
   about a page of running legal prose — which is most of what this site is.
   These are the values that gap needs, kept here rather than in styles.css so
   the no-literals rule still holds, and kept BELOW the fence so a re-export
   can be pasted over the region above without stepping on them.

   Fonts are loaded by a <link> in each page's <head> rather than by
   tokens/fonts.css's @import. An @import is discovered only after this file
   has been fetched and parsed, so it serializes two round trips before any
   text can paint; a <link> in the head starts both in parallel. If the
   families change in the design system, they change in three <head>s here.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
	/* THE LOCKUP. One knob: everything in the mark is sized in `em` off this,
	   the way Logo.jsx derives every dimension from its `size` prop. The
	   design's own ratios, kept as tokens so they stay legible as ratios:
	   cursor 0.4 × 0.86, strapline 0.26, ghost line 0.24, stack gap 0.18. */
	/* The ceiling is set by measuring against the bundle's own
	   scrapcode-lockup-dark.png, where the mark occupies ~41% of the frame.
	   At 3.5rem it came out at 31% of a 1280px viewport and read timidly; 68px
	   puts it back at ~38%. Major Mono Display is unusually wide (~0.79em per
	   glyph) so "scrapcode" is nine of them — check the low end on a 375px
	   phone if you change this, not just the desktop cap. */
	--lockup-size: clamp(2.125rem, 9vw, 4.25rem);
	--lockup-cursor-w: 0.4em;
	--lockup-cursor-h: 0.86em;
	--lockup-strap: 0.26em;
	--lockup-ghost: 0.24em;
	--lockup-gap: 0.18em;

	/* PROSE, and a deliberate departure from the type scale above.
	   That scale stops at 14px for body because it was drawn for Carta's
	   dense chrome around a map — "app chrome runs 10–14px". A privacy policy
	   is not chrome; it is a document somebody has to read to the end, so it
	   is set at 16px with the relaxed leading. Departing here rather than
	   adding a 15th step to the system's scale, because the system is right
	   about Carta and this is the only page in the estate that is prose. */
	--fs-prose: 1rem;
	--fs-prose-sm: var(--text-sm);
	/* Line length. A typographic decision (it follows from the face and its
	   size), which is why it is a token and not a layout number. */
	--measure: 38rem;
}