/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BRAND CORE — GENERATED FILE, DO NOT EDIT BY HAND                   ║
   ║  Source : brand.json                                                 ║
   ║  Builder: python3 tools/brand-generate.py                            ║
   ║  Guard  : tools/check-brand-tokens.py                                ║
   ╚══════════════════════════════════════════════════════════════════════╝

   This file holds NO visual rules, only values. Each surface keeps its
   own token names and binds them to these:

       app/sidepanel.css :  --color-primary: var(--brand-blue);
       app/content.css   :  --fba-color-primary: var(--brand-blue);
       site/shared.css   :  --blue: var(--brand-blue);

   So none of the 2300+ call sites is touched and the brand blue changes
   in ONE place. */

:root {

  /* ── TYPOGRAPHY · face ── */
  --brand-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brand-font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brand-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ── TYPOGRAPHY · scale (CLAUDE.md §8) ── */
  --brand-text-11: 11px;
  --brand-text-12: 12px;
  --brand-text-13: 13px;
  --brand-text-14: 14px;
  --brand-text-15: 15px;
  --brand-text-17: 17px;
  --brand-text-22: 22px;
  --brand-text-26: 26px;
  --brand-weight-regular: 400;
  --brand-weight-medium: 600;

  /* ── RADIUS (CLAUDE.md §8) ── */
  --brand-radius-sm: 8px;
  --brand-radius-md: 12px;
  --brand-radius-pill: 999px;

  /* ── SPACING · 4-based ── */
  --brand-space-2: 2px;
  --brand-space-4: 4px;
  --brand-space-6: 6px;
  --brand-space-8: 8px;
  --brand-space-10: 10px;
  --brand-space-12: 12px;
  --brand-space-16: 16px;
  --brand-space-20: 20px;
  --brand-space-24: 24px;
  --brand-space-32: 32px;

  /* ── COLOUR · hex + rgb triple from one source ── */
  --brand-blue: #1f4fff;
  --brand-blue-rgb: 31, 79, 255;
  --brand-blue-deep: #0d2fbf;
  --brand-blue-deep-rgb: 13, 47, 191;
  --brand-accent: #f5a623;
  --brand-accent-rgb: 245, 166, 35;
  --brand-ink: #0b0d14;
  --brand-ink-rgb: 11, 13, 20;
  --brand-cream: #f7f5f0;
  --brand-cream-rgb: 247, 245, 240;
  --brand-white: #ffffff;
  --brand-white-rgb: 255, 255, 255;
  --brand-blue-lite: #8aa5ff;
  --brand-blue-lite-rgb: 138, 165, 255;
  --brand-info: #0066cc;
  --brand-info-rgb: 0, 102, 204;
  --brand-danger: #ff453a;
  --brand-danger-rgb: 255, 69, 58;
  --brand-danger-ink: #c7261b;
  --brand-danger-ink-rgb: 199, 38, 27;
  --brand-warn: #ff9f0a;
  --brand-warn-rgb: 255, 159, 10;
  --brand-warn-ink: #8a5a00;
  --brand-warn-ink-rgb: 138, 90, 0;
  --brand-success: #30d158;
  --brand-success-rgb: 48, 209, 88;
  --brand-success-ink: #1d7333;
  --brand-success-ink-rgb: 29, 115, 51;
  --brand-shopify: #95bf47;
  --brand-shopify-rgb: 149, 191, 71;
  --brand-ink-soft: #3a3a3e;
  --brand-ink-soft-rgb: 58, 58, 62;
  --brand-paper-dim: #edeff4;
  --brand-paper-dim-rgb: 237, 239, 244;
  --brand-muted: #5a5a62;
  --brand-muted-rgb: 90, 90, 98;
  --brand-on-brand: var(--brand-white);   /* foreground on a brand-blue background */
}