/* ==========================================================================
   BUILDR installer PWA — brand tokens (CR-BUILDR-A001-23).

   Copied verbatim from the ratified `styles-r2.css` (Claude Design project
   "Buildr", ds-bundle-app-r1 round, RATIFIED by Drew 2026-08-27) — every
   :root value below is byte-identical to that file's own :root block. The
   card-gallery-only classes (.ds-wrap/.ds-eyebrow/.ds-title/.ds-lede/
   .ds-rule/.ds-spec/.ds-stage) are dropped — they exist only to lay out the
   Claude Design gallery page itself, never part of any shipped screen.
   ========================================================================== */

:root {
  /* ---- GROUND · white, always (round-2 law) ----------------------------- */
  --paper:      #FFFFFF;
  --board:      #F6F7F8;
  --dust:       #E4E6E9;
  --chalk:      #C9CFD4;

  /* ---- ACCENT · SITE ORANGE — logo mark ONLY, never interactive chrome --- */
  --orange:      #F94A00;
  --orange-ink:  #B03200;
  --orange-tint: #FFEDE4;

  /* ---- INTERACTIVE · navy — every CTA, RATIFIED 2026-08-27 --------------- */
  --navy:        #13265C;
  --navy-edge:   #0C1940;

  /* ---- INK · near-black, never #000 -------------------------------------- */
  --ink:        #1A1D20;
  --ink-soft:   #4B5158;
  --ink-mute:   #6B7178;

  /* ---- SEMANTIC · deep variants only (light ground) ---------------------- */
  --go-deep:     #0B6B3C;
  --hold-deep:   #7A4F00;
  --danger-deep: #B80D28;

  /* ---- TYPE ---------------------------------------------------------------- */
  --font-brand:  "Barlow", "Barlow Semi Condensed", "Helvetica Neue",
                 Arial, system-ui, sans-serif;
  --font-ui:     "IBM Plex Sans", ui-sans-serif, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, monospace;

  --t-hero: 64px; --t-h1: 40px; --t-h2: 28px; --t-h3: 21px;
  --t-body: 17px; --t-sm: 15px; --t-xs: 13px; --t-micro: 11px;

  /* ---- SPACE · 4px base --------------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ---- FORM · low radius, hairlines, flat --------------------------------- */
  --r-sm:3px; --r-md:6px; --r-lg:10px; --r-full:999px;
  --edge: 1px;

  /* ---- TOUCH · gloved thumb ------------------------------------------------ */
  --tap-min: 64px;
  --tap-gap: 10px;

  /* ---- MOTION · short, mechanical, no bounce ------------------------------- */
  --dur-1: 90ms; --dur-2: 150ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-lg { width: 22px; height: 22px; }

.loading-screen {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-3); color: var(--ink-mute); font-size: 13px;
}
.loading-screen .brand-mark {
  width: 44px; height: 44px; border-radius: var(--r-md); background: var(--orange);
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brand);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}