/* Blue Reacher design tokens
   Drop this in, use the variables, never hardcode a hex. */

:root{
  /* --- Brand core (locked, do not change) --- */
  --br-blue:#007AFF;
  --br-white:#FFFFFF;
  --br-black:#000000;
  --br-gray:#D1D1D1;

  /* --- Blue scale (tints of the accent) --- */
  --br-blue-50:#F2F8FF;
  --br-blue-100:#E6F2FF;
  --br-blue-200:#BFDEFF;
  --br-blue-400:#4DA2FF;
  --br-blue-500:#007AFF;   /* = brand blue */
  --br-blue-text:#0066DD;  /* small text and links: #007AFF is 4.02:1 on
                              white, under the 4.5 small text needs */
  --br-blue-600:#0A6FE8;   /* hover */
  --br-blue-700:#0857BC;   /* pressed */
  --br-blue-800:#063E86;

  /* --- Logo gradient (mark only) --- */
  --br-grad-start:#5AC8FA;
  --br-grad-end:#2563EB;
  --br-grad:linear-gradient(135deg,var(--br-grad-start),var(--br-grad-end));

  /* --- Neutrals, light theme --- */
  --br-bg:#FFFFFF;
  --br-surface:#F5F5F7;
  --br-surface-2:#ECF2FD;
  --br-line:#E5E5EA;
  --br-ink:#1D1D1F;
  --br-ink-2:#6E6E73;
  --br-ink-3:#86868B;

  /* --- Semantic --- */
  --br-success:#34C759;
  --br-warning:#FF9F0A;
  --br-error:#FF3B30;
  --br-success-bg:#E8F9ED;
  --br-warning-bg:#FFF4E0;
  --br-error-bg:#FFECEB;

  /* --- Radius --- */
  --br-r-sm:8px;    /* small buttons, chips */
  --br-r-md:10px;   /* buttons, inputs */
  --br-r-lg:12px;   /* small cards, alerts */
  --br-r-xl:16px;   /* cards */
  --br-r-2xl:24px;  /* modals, hero panels */
  --br-r-pill:999px;

  /* --- Space (4px grid) --- */
  --br-s-1:4px;  --br-s-2:8px;  --br-s-3:12px; --br-s-4:16px;
  --br-s-5:24px; --br-s-6:32px; --br-s-7:48px; --br-s-8:64px;

  /* --- Elevation --- */
  --br-e-1:0 1px 3px rgba(0,0,0,.12);
  --br-e-2:0 4px 12px rgba(16,24,40,.08);
  --br-e-3:0 6px 18px rgba(16,24,40,.06);
  --br-e-4:0 16px 40px rgba(16,24,40,.12);
  --br-focus:0 0 0 3px rgba(0,122,255,.35);

  /* --- Type --- */
  --br-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --br-t-display:48px; --br-t-h1:40px; --br-t-h2:32px; --br-t-h3:24px; --br-t-h4:20px;
  --br-t-lead:18px;    --br-t-body:16px; --br-t-sm:14px; --br-t-caption:13px; --br-t-label:12px;

  /* --- Layout --- */
  --br-content:1200px;
  --br-prose:720px;
}

/* --- Dark theme --- */
@media (prefers-color-scheme:dark){
  :root{
    --br-bg:#0A0A0C; --br-surface:#1C1C1E; --br-surface-2:#2C2C2E; --br-line:#2C2C2E;
    --br-ink:#F5F5F7; --br-ink-2:#98989D; --br-ink-3:#6E6E73;
    --br-success-bg:#123020; --br-warning-bg:#3A2A0C; --br-error-bg:#3A1512;
    --br-e-1:0 1px 3px rgba(0,0,0,.6);   --br-e-2:0 4px 12px rgba(0,0,0,.5);
    --br-e-3:0 6px 18px rgba(0,0,0,.45); --br-e-4:0 16px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --br-bg:#0A0A0C; --br-surface:#1C1C1E; --br-surface-2:#2C2C2E; --br-line:#2C2C2E;
  --br-ink:#F5F5F7; --br-ink-2:#98989D; --br-ink-3:#6E6E73;
  --br-success-bg:#123020; --br-warning-bg:#3A2A0C; --br-error-bg:#3A1512;
  --br-e-1:0 1px 3px rgba(0,0,0,.6);   --br-e-2:0 4px 12px rgba(0,0,0,.5);
  --br-e-3:0 6px 18px rgba(0,0,0,.45); --br-e-4:0 16px 40px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --br-bg:#FFFFFF; --br-surface:#F5F5F7; --br-surface-2:#ECF2FD; --br-line:#E5E5EA;
  --br-ink:#1D1D1F; --br-ink-2:#6E6E73; --br-ink-3:#86868B;
  --br-success-bg:#E8F9ED; --br-warning-bg:#FFF4E0; --br-error-bg:#FFECEB;
  --br-e-1:0 1px 3px rgba(0,0,0,.12);  --br-e-2:0 4px 12px rgba(16,24,40,.08);
  --br-e-3:0 6px 18px rgba(16,24,40,.06); --br-e-4:0 16px 40px rgba(16,24,40,.12);
}