/**
 * Xero brand palette — all UI solids derive from these swatches.
 * Soft fills use rgba() of the same inks where noted.
 * --color-text-on-primary is #fff for WCAG on #0078C8 (not in swatch).
 */
:root {
  --brand-blue-700: #0078c8;
  --brand-border: #cdd7e0;
  --brand-neutral-page: #f1f4f6;
  --brand-purple: #5c5ce5;
  --brand-coral: #ff6469;
  --brand-pink: #ff8cae;
  --brand-orange: #f98000;
  --brand-yellow: #fdcc08;
  --brand-mint: #50dcaa;
  --brand-sky-soft: #bbf3fd;
  --brand-navy: #213b55;
  --brand-sky: #13b5ea;

  --color-text-on-primary: #ffffff;

  --brand-white: #ffffff;

  color-scheme: light;

  /* White chrome (body + header); tinted canvas only under main app regions. */
  --xui-color-page: var(--brand-white);
  --header-bg: var(--brand-white);
  --app-canvas-bg: var(--brand-neutral-page);
  --xui-color-surface: var(--brand-white);
  --xui-color-text: var(--brand-navy);
  --xui-color-text-secondary: rgba(33, 59, 85, 0.64);
  --xui-color-border: var(--brand-border);
  --xui-color-border-subtle: var(--brand-border);
  /* Rows / controls on the tinted app canvas (contrast vs --app-canvas-bg). */
  --xui-color-row: var(--brand-white);

  --xui-color-action: var(--brand-sky);
  --xui-color-action-hover: var(--brand-sky);
  --xui-color-action-strong: var(--brand-blue-700);
  --xui-color-action-strong-hover: var(--brand-sky);
  --xui-color-action-subtle: var(--brand-sky-soft);

  --xui-shadow-raised: 0 1px 2px rgba(33, 59, 85, 0.06), 0 4px 16px rgba(33, 59, 85, 0.04);
  --xui-shadow-header: 0 1px 0 rgba(33, 59, 85, 0.08);

  --xui-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* App-wide aliases */
  --bg: var(--xui-color-page);
  --surface: var(--xui-color-surface);
  --text: var(--xui-color-text);
  --muted: var(--xui-color-text-secondary);
  --border: var(--xui-color-border);
  --accent: var(--xui-color-action);
  --accent-soft: var(--xui-color-action-subtle);
  --accent-fill: var(--xui-color-action-strong);
  --accent-fill-hover: var(--xui-color-action-strong-hover);
  /** Light wash of brand blue behind selected quiz choices / similar. */
  --accent-fill-subtle: rgba(0, 120, 200, 0.12);
  --focus-ring: var(--accent-fill);

  --success: var(--brand-mint);
  --success-soft: rgba(80, 220, 170, 0.22);
  --danger: var(--brand-coral);
  --danger-soft: rgba(255, 100, 105, 0.18);

  --badge-recert-due-fg: var(--brand-navy);
  --badge-recert-due-bg: var(--brand-yellow);
  --badge-recert-due-border: var(--brand-orange);

  --badge-recert-window-fg: var(--brand-navy);
  --badge-recert-window-bg: var(--brand-sky-soft);
  --badge-recert-window-border: var(--brand-sky);

  --banner-time-expired-bg: var(--brand-yellow);
  --banner-time-expired-border: var(--brand-orange);
  --banner-time-expired-fg: var(--brand-navy);

  --banner-cooldown-bg: var(--brand-sky-soft);
  --banner-admin-warn-bg: rgba(253, 204, 8, 0.35);
  --banner-admin-warn-border: var(--brand-orange);
  --banner-admin-warn-fg: var(--brand-navy);

  --video-container-bg: var(--brand-navy);
  --code-bg: var(--brand-sky-soft);

  --badge-team-l1-border: var(--brand-sky);
  --badge-team-l2-fg: var(--brand-navy);
  --badge-team-l2-bg: var(--brand-sky-soft);
  --badge-team-l2-border: var(--brand-sky);
  --badge-team-l3-fg: var(--brand-navy);
  --badge-team-l3-bg: rgba(80, 220, 170, 0.22);
  --badge-team-l3-border: var(--brand-mint);
  --badge-team-payroll-fg: var(--brand-purple);
  --badge-team-payroll-bg: rgba(255, 140, 174, 0.28);
  --badge-team-payroll-border: var(--brand-purple);
  --expiry-window-fg: var(--brand-sky);

  --radius: 8px;
  --radius-control: 4px;
  --shadow: var(--xui-shadow-raised);

  font-family: var(--xui-font-sans);
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
  background-color: var(--bg);
}

html.xui {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--xui-color-page);
}