/* Brick HUB design tokens. New layout only (body.hub-v12); Classic is unchanged.
   One palette for every new-layout screen:
     navy   = structure: the menu, the phone header
     blue   = anything you can act on: buttons, links, the selected tab or filter
     red    = alerts only: overdue, needs approval, failed, errors
   Status always has a word next to its color, never color alone.
   Change a color here, not in the page stylesheets. */

body.hub-v12 {
  /* Structure */
  --hub-navy: #12213B;
  --hub-navy-2: #24375A;
  --hub-navy-l: #E8ECF3;
  --hub-on-navy: #FFFFFF;
  --hub-on-navy-muted: #C9D2E3;

  /* Action */
  --hub-action: #2563EB;
  --hub-action-d: #1D4ED8;
  --hub-action-l: #EAF1FE;
  --hub-action-line: #BFD3F8;

  /* Status scale */
  --hub-alert: #C2362B;      /* Needs you: overdue, needs review, failed */
  --hub-alert-l: #FDEAE8;
  --hub-progress: #2563EB;   /* In progress, uploading, planned */
  --hub-progress-l: #EAF1FE;
  --hub-wait: #8A5A12;       /* Waiting, held, over the pay cap */
  --hub-wait-l: #FFF4D6;
  --hub-done: #16794C;       /* Done, paid, synced, ready */
  --hub-done-l: #E3F4EA;
  --hub-done-bright: #3CCB85;/* done dot on the navy header */
  --hub-off: #64748B;        /* Inactive, declined, not ready */
  --hub-off-l: #EEF1F5;

  /* Neutrals */
  --hub-ink: #1A2233;
  --hub-ink-muted: #5B6576;
  --hub-line: #E3E7EE;
  --hub-line-strong: #D3D9E3;
  --hub-canvas: #F5F6F9;
  --hub-surface: #FFFFFF;

  /* Interaction */
  --hub-focus: 0 0 0 3px rgba(37, 99, 235, .45);
  --hub-tap: 44px;
  --hub-radius: 8px;
  --hub-radius-card: 12px;

  /* The existing new-layout names, pointed at the palette. */
  --v12-accent: var(--hub-action);
  --v12-accent-d: var(--hub-action-d);
  --v12-accent-l: var(--hub-action-l);
  --sidebar-bg: var(--hub-navy);
  --sidebar-bg-hover: var(--hub-navy-2);
  --sidebar-text: var(--hub-on-navy-muted);
}