/* brand.tokens.css — generated by build_app.py from brand-handoff.json.
 * Loaded app-wide via root.tsx. Screens are custom HTML (no Polaris defaults);
 * style every colour/font from these --brand-* variables. */
:root {
  --brand-primary: #26221C;
  --brand-accent: #0E7EA8;
  --brand-support: #EAE3D8;
  --brand-surface-light: #FAF6F0;
  --brand-surface-dark: #26221C;
  --brand-ink: #26221C;
  --brand-ink-muted: #6E6558;
  --brand-ink-on-dark: #F7F2EA;
  --brand-success: #2E7D4F;
  --brand-warning: #B96E12;
  --brand-critical: #B3402E;
  --brand-info: #6A52C8;
  --brand-card: #FFFDF9;
  --brand-sunken: #F3EDE4;
  --brand-border: #EAE3D8;
  --brand-hairline: #F5F0E8;
  --brand-neutral-50: #FCF9F4;
  --brand-neutral-100: #F5F0E8;
  --brand-neutral-200: #EAE3D8;
  --brand-neutral-300: #D8CFC1;
  --brand-neutral-400: #B3A797;
  --brand-neutral-500: #8C8172;
  --brand-neutral-600: #6E6558;
  --brand-neutral-700: #544C41;
  --brand-neutral-800: #3A342C;
  --brand-neutral-900: #26221C;
  --brand-success-tint: #E7F1E5;
  --brand-success-text: #235B3C;
  --brand-warning-tint: #F7ECD9;
  --brand-warning-text: #7A4A08;
  --brand-critical-tint: #F8E5DF;
  --brand-critical-text: #8C2F1F;
  --brand-info-tint: #ECE8F8;
  --brand-info-text: #46368F;
  --brand-link: #3E5FD7;
  --brand-link-hover: #3350B8;
  --brand-action-secondary: #EFE9DF;
  --brand-action-secondary-text: #3A342C;
  --brand-action-destructive: #B3402E;
  --brand-action-destructive-text: #FFF6F2;
  --brand-font-display: "Instrument Sans", system-ui, sans-serif;
  /* Inter = the Shopify/Polaris host-platform native UI face (channel-scoped
   * to the shopify-app channel; an iOS channel would inherit SF Pro, Android
   * Roboto). Loaded in root.tsx from the Shopify CDN + Google Fonts. */
  --brand-font-body: "Inter", system-ui, sans-serif;
}

body { font-family: var(--brand-font-body); color: var(--brand-ink); background: var(--brand-surface-light); }
h1, h2, h3 { font-family: var(--brand-font-display); color: var(--brand-ink); }
.screen-stub { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
.screen-stub h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
.screen-stub p { color: var(--brand-ink-muted); }