/* ArbMate brand layer over the shared design system (loaded after design.css,
   unlayered, so these tokens win). Colours come from the ArbMate mark: its
   gradient #f3bf23 -> #f39323 -> #f36623 and the site's orange #f7a021.
   Every text pair below is measured >= 4.5:1 on bg, surface and the three
   lower containers of its theme. */
:root {
  --primary:      #f7a021;
  --primary-soft: #f7a021;   /* links on dark: 7.2 on surface-container-high */
  --primary-deep: #c2550f;
  --on-primary:   #1d1206;   /* dark text on orange: 5.9 on the deepest gradient stop */
  --primary-fill: #f7a021;   /* a solid orange behind --on-primary (tab indicator): 8.8 with it; not themed */
  --brand-gradient: linear-gradient(135deg, #f3bf23 0%, #f39323 52%, #f36623 100%);
  --focus-ring: 0 0 0 var(--focus-ring-w, 3px) rgba(247, 160, 33, 0.45);

  /* Neutral charcoal, the ArbMate header's own family (#222 / #333) */
  --bg:                        #121211;
  --surface:                   #171716;
  --surface-container-low:     #1a1a19;
  --surface-container:         #1f1f1d;
  --surface-container-high:    #262624;
  --surface-container-highest: #2e2e2b;
  --border:        #2a2a28;
  --border-strong: #3b3b38;
  --text:       #eeeeea;
  --text-muted: #ababa5;     /* 6.6 on surface-container-high */
  --text-dim:   #8f8f89;     /* 4.7 on surface-container-high */
  --status-err-text: #ec6a4a; /* 4.9 on surface-container-high (the shared #e05a3a is 4.1 there) */
}
html.light {
  --primary:      #8f5200;   /* text on light: 4.8 on surface-container-high */
  --primary-soft: #8f5200;
  --primary-deep: #c2550f;
  --on-primary:   #1d1206;   /* buttons keep the bright gradient with dark text in both themes.
                                Only .os-notification-badge puts this on --primary (2.96 here):
                                give it its own colour before the notification feed is adopted. */
  --focus-ring: 0 0 0 var(--focus-ring-w, 3px) rgba(143, 82, 0, 0.45);

  --bg:                        #f7f7f4;
  --surface:                   #ffffff;
  --surface-container-low:     #f0f0ec;
  --surface-container:         #ebebe6;
  --surface-container-high:    #e3e3dd;
  --surface-container-highest: #d9d9d2;
  --border:        #e2e2dc;
  --border-strong: #c8c8c0;
  --text:       #1b1b18;
  --text-muted: #52524c;     /* 6.1 on surface-container-high */
  --text-dim:   #64645d;     /* 4.6 on surface-container-high */
  --status-err-text: #a83a1f; /* 5.0 on surface-container-high */
  --status-ok-text:  #3d5e1d; /* the shared light theme points this at --primary, orange here: keep "ok" green, 5.8 */
}