/* ===========================================================================
   tokens.css — Brick HQ design tokens for the static marketing site.

   MIRRORS constants/designTokens.ts. REGENERATE WHEN THAT FILE CHANGES.

   Do not hand-edit the :root block below. It was not written by hand — it is
   the verbatim output of `toCssVars()` in constants/designTokens.ts, which
   derives every name and value from the `tokens` object at module load. That
   is the whole point: the app reads the TypeScript, the site reads this file,
   and neither can drift because one is generated from the other.

   To regenerate (from the repo root):

       npx tsc constants/designTokens.ts constants/appTheme.ts \
         --module commonjs --target es2019 --moduleResolution node \
         --skipLibCheck --outDir /tmp/tok
       node -e "const p=require('path'),M=require('module'),o=M._resolveFilename; \
         M._resolveFilename=function(r,...a){return r==='@/constants/appTheme' \
           ? p.join('/tmp/tok','appTheme.js') : o.call(this,r,...a)}; \
         console.log(require('/tmp/tok/designTokens.js').toCssVars())" > tokens.css

   then re-apply the two hand-authored sections at the bottom of this file.
   (The tsc step reports one TS2307 for the '@/' alias and emits anyway; the
   require shim is what resolves it. Both are expected.)

   NAMING. The `--bh-` prefix and every name after it come from the generator,
   not from a choice made here. Nested token keys flatten with '-', so
   `tokens.surface.scrim.base` is `--bh-surface-scrim-base` and
   `tokens.type.body.size` is `--bh-type-body-size`. Every variable is
   traceable back to its token by reversing that rule. camelCase is preserved
   (`--bh-layout-contentMax`), because lowercasing it would break the
   round-trip.

   196 variables. Numbers carry `px` except `--bh-radius-pill`, which is the
   fully-round sentinel and is emitted unitless on purpose.
   =========================================================================== */

:root {
  --bh-primitive-ink: #1a1a1a;
  --bh-primitive-white: #ffffff;
  --bh-primitive-cream: #fffbf0;
  --bh-primitive-black: #000;
  --bh-primitive-gold: #f5c518;
  --bh-primitive-grey-50: #f5f5f5;
  --bh-primitive-grey-100: #f0f0f0;
  --bh-primitive-grey-200: #e0e0e0;
  --bh-primitive-grey-300: #d0d0d0;
  --bh-primitive-grey-500: #bbbbbb;
  --bh-primitive-grey-600: #999999;
  --bh-primitive-grey-700: #666666;
  --bh-primitive-amber-50: #fffbeb;
  --bh-primitive-amber-100: #fef3c7;
  --bh-primitive-amber-200: #fde68a;
  --bh-primitive-amber-500: #f59e0b;
  --bh-primitive-amber-800: #854d0e;
  --bh-primitive-amber-900: #92400e;
  --bh-primitive-amber-tint: #fff7e0;
  --bh-primitive-amber-dim: #ede8d8;
  --bh-primitive-amber-inkDeep: #6b4f00;
  --bh-primitive-amber-inkDark: #3d2f00;
  --bh-primitive-yellow-100: #fef9c3;
  --bh-primitive-yellow-300: #fde047;
  --bh-primitive-yellow-600: #ca8a04;
  --bh-primitive-yellow-700: #a16207;
  --bh-primitive-orange-base: #f97316;
  --bh-primitive-orange-deep: #e65100;
  --bh-primitive-red-50: #fef2f2;
  --bh-primitive-red-100: #fee2e2;
  --bh-primitive-red-200: #fecaca;
  --bh-primitive-red-300: #fca5a5;
  --bh-primitive-red-400: #f87171;
  --bh-primitive-red-600: #dc2626;
  --bh-primitive-red-700: #b91c1c;
  --bh-primitive-red-800: #c62828;
  --bh-primitive-red-brick: #cc2200;
  --bh-primitive-red-material: #b00020;
  --bh-primitive-red-rose: #9f1239;
  --bh-primitive-red-ink: #3a1f1f;
  --bh-primitive-green-100: #dcfce7;
  --bh-primitive-green-300: #86efac;
  --bh-primitive-green-400: #4ade80;
  --bh-primitive-green-600: #16a34a;
  --bh-primitive-green-tint: #f0faf4;
  --bh-primitive-green-sage: #a3d9b8;
  --bh-primitive-green-emerald400: #34d399;
  --bh-primitive-green-emerald500: #10b981;
  --bh-primitive-green-deep: #1a7a47;
  --bh-primitive-green-material: #2e7d32;
  --bh-primitive-green-olive: #558b2f;
  --bh-primitive-blue-50: #eff6ff;
  --bh-primitive-blue-100: #dbeafe;
  --bh-primitive-blue-200: #bfdbfe;
  --bh-primitive-blue-300: #93c5fd;
  --bh-primitive-blue-600: #2563eb;
  --bh-primitive-blue-700: #1d4ed8;
  --bh-primitive-blue-800: #1e40af;
  --bh-primitive-blue-steel: #1a6fa8;
  --bh-primitive-blue-retailer: #0071ce;
  --bh-primitive-indigo-600: #3949ab;
  --bh-primitive-indigo-900: #1a237e;
  --bh-primitive-indigo-ink: #1a1a2e;
  --bh-primitive-purple-400: #7c4dff;
  --bh-primitive-purple-600: #7c3aed;
  --bh-primitive-purple-used: #5c35b8;
  --bh-surface-page: #fffbf0;
  --bh-surface-card: #ffffff;
  --bh-surface-sheet: #ffffff;
  --bh-surface-raised: #f5f5f5;
  --bh-surface-sunken: #f0f0f0;
  --bh-surface-splash: #0d0d0f;
  --bh-surface-scrim-light: rgba(0,0,0,0.40);
  --bh-surface-scrim-base: rgba(0,0,0,0.55);
  --bh-surface-scrim-heavy: rgba(0,0,0,0.70);
  --bh-border-hairline: #e0e0e0;
  --bh-border-strong: #d0d0d0;
  --bh-border-focus: #f5c518;
  --bh-border-onDark: rgba(255,255,255,0.18);
  --bh-text-primary: #1a1a1a;
  --bh-text-secondary: #666666;
  --bh-text-tertiary: #999999;
  --bh-text-faint: #bbbbbb;
  --bh-text-onDark: #ffffff;
  --bh-text-onGold: #3d2f00;
  --bh-text-link: #1d4ed8;
  --bh-accent-brand: #f5c518;
  --bh-accent-selectedFill: #f5c518;
  --bh-accent-selectedEdge: #f5c518;
  --bh-accent-controlDot: #f5c518;
  --bh-accent-progress: #f5c518;
  --bh-accent-linkText: #f5c518;
  --bh-accent-attention: #f5c518;
  --bh-accent-loading: #f5c518;
  --bh-accent-tint: #fff7e0;
  --bh-accent-onAccent: #3d2f00;
  --bh-status-positive: #16a34a;
  --bh-status-positiveTint: #f0faf4;
  --bh-status-positiveEdge: #86efac;
  --bh-status-negative: #dc2626;
  --bh-status-negativeTint: #fef2f2;
  --bh-status-negativeEdge: #fecaca;
  --bh-status-warning: #f59e0b;
  --bh-status-warningTint: #fef3c7;
  --bh-status-warningText: #854d0e;
  --bh-status-info: #1d4ed8;
  --bh-status-infoTint: #eff6ff;
  --bh-status-infoEdge: #bfdbfe;
  --bh-domain-conditionNew: #1a237e;
  --bh-domain-conditionUsed: #5c35b8;
  --bh-domain-retailer: #0071ce;
  --bh-domain-legoRed: #cc2200;
  --bh-domain-chart-brickLinkUsed: #8B8178;
  --bh-domain-chart-brickLinkNew: #6E7F8D;
  --bh-radius-xs: 4px;
  --bh-radius-sm: 6px;
  --bh-radius-md: 8px;
  --bh-radius-lg: 10px;
  --bh-radius-xl: 12px;
  --bh-radius-xxl: 14px;
  --bh-radius-sheet: 16px;
  --bh-radius-card: 20px;
  --bh-radius-pill: 999;
  --bh-space-xs: 4px;
  --bh-space-sm: 8px;
  --bh-space-md: 12px;
  --bh-space-lg: 16px;
  --bh-space-xl: 20px;
  --bh-space-xxl: 24px;
  --bh-space-xxxl: 32px;
  --bh-borderWidth-hairline: 1px;
  --bh-borderWidth-medium: 1.5px;
  --bh-borderWidth-thick: 2px;
  --bh-layout-contentMax: 1100px;
  --bh-layout-contentWideMax: 1600px;
  --bh-layout-sidebar: 200px;
  --bh-layout-dialogMax: 520px;
  --bh-layout-fieldMax: 320px;
  --bh-layout-breakpoint-desktop: 1024px;
  --bh-layout-breakpoint-wide: 1600px;
  --bh-type-micro-size: 10px;
  --bh-type-micro-weight: 800;
  --bh-type-micro-lineHeight: 14px;
  --bh-type-caption-size: 11px;
  --bh-type-caption-weight: 600;
  --bh-type-caption-lineHeight: 15px;
  --bh-type-captionBold-size: 11px;
  --bh-type-captionBold-weight: 800;
  --bh-type-captionBold-lineHeight: 15px;
  --bh-type-metaSoft-size: 12px;
  --bh-type-metaSoft-weight: 600;
  --bh-type-metaSoft-lineHeight: 16px;
  --bh-type-meta-size: 12px;
  --bh-type-meta-weight: 700;
  --bh-type-meta-lineHeight: 16px;
  --bh-type-body-size: 13px;
  --bh-type-body-weight: 600;
  --bh-type-body-lineHeight: 18px;
  --bh-type-bodyBold-size: 13px;
  --bh-type-bodyBold-weight: 700;
  --bh-type-bodyBold-lineHeight: 18px;
  --bh-type-bodyLg-size: 14px;
  --bh-type-bodyLg-weight: 700;
  --bh-type-bodyLg-lineHeight: 19px;
  --bh-type-rowTitle-size: 14px;
  --bh-type-rowTitle-weight: 800;
  --bh-type-rowTitle-lineHeight: 19px;
  --bh-type-cardTitle-size: 16px;
  --bh-type-cardTitle-weight: 900;
  --bh-type-cardTitle-lineHeight: 22px;
  --bh-type-sectionTitle-size: 18px;
  --bh-type-sectionTitle-weight: 900;
  --bh-type-sectionTitle-lineHeight: 24px;
  --bh-type-screenTitle-size: 22px;
  --bh-type-screenTitle-weight: 900;
  --bh-type-screenTitle-lineHeight: 28px;
  --bh-type-display-size: 28px;
  --bh-type-display-weight: 900;
  --bh-type-display-lineHeight: 32px;
  --bh-type-displayLg-size: 34px;
  --bh-type-displayLg-weight: 900;
  --bh-type-displayLg-lineHeight: 39px;
  --bh-type-numeral-size: 40px;
  --bh-type-numeral-weight: 900;
  --bh-type-numeral-lineHeight: 46px;
  --bh-typeException-collectorHero-size: 48px;
  --bh-typeException-collectorHero-weight: 700;
  --bh-typeException-collectorHero-lineHeight: 52px;
  --bh-typeException-investorHero-size: 42px;
  --bh-typeException-investorHero-weight: 800;
  --bh-typeException-investorHero-lineHeight: 46px;
  --bh-glyph-xs: 12px;
  --bh-glyph-sm: 16px;
  --bh-glyph-md: 20px;
  --bh-glyph-xl: 32px;
  --bh-glyph-hero: 44px;
}

/* ===========================================================================
   HAND-AUTHORED — NOT FROM constants/designTokens.ts.
   Everything below this line is preserved by hand across regenerations.
   A second :root block is valid CSS; the two merge.
   =========================================================================== */

/* ── TYPEFACES ───────────────────────────────────────────────────────────────
   designTokens.ts has NO font-family token. It defines sizes, weights and
   line-heights (--bh-type-*) but never a family, so there is nothing here to
   mirror — these are recorded from what each surface actually renders.

   --bh-font-system is the app's real web typography: the app loads no fonts
   at all (no useFonts, no font files in assets/, expo-font is an unused
   dependency), so every Text falls through to react-native-web's built-in
   stack. Copied verbatim from RNW 0.21.2,
   dist/exports/StyleSheet/compiler/createReactDOMStyle.js line 26.

   --bh-font-display and --bh-font-body are the SITE's fonts, loaded from
   Google Fonts by index.html and admin-deals.html. They are NOT the app's.
   Matching the app's typography and matching the site's existing pages are
   two different goals; pick one deliberately rather than by which variable
   is nearer to hand. privacy.html, terms.html and delete-account.html
   already use the system stack, so the site is split against itself today.

   --bh-font-mono is the app's admin monospace (app/admin/deals.tsx line 828),
   widened with a web-safe fallback chain.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --bh-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bh-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --bh-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bh-font-mono: "DM Mono", Menlo, Consolas, "Courier New", monospace;
}

/* ── BREAKPOINTS AS LITERALS ─────────────────────────────────────────────────
   --bh-layout-breakpoint-desktop and -wide exist in the :root block above and
   are usable in calc(), clamp(), container queries, and from JS via
   getComputedStyle(document.documentElement).getPropertyValue(...).

   They CANNOT be used in a media query. A media query such as
   "@media (min-width: var(--bh-layout-breakpoint-desktop))" is invalid in
   every browser: media conditions are evaluated before custom properties
   resolve. There is no workaround at this layer, so the two numbers must be
   written as literals at each use site:

       @media (min-width: 1024px)   tokens.layout.breakpoint.desktop
       @media (min-width: 1600px)   tokens.layout.breakpoint.wide

   Those are the only two values in this file that a regeneration cannot keep
   in sync for you. If the breakpoints ever change, grep the site for 1024px
   and 1600px by hand.
   ─────────────────────────────────────────────────────────────────────────── */