/*
 * CareHub web — design tokens. The ONLY file allowed to hold hex colours.
 *
 * PROVENANCE: base values are comhub's `communication-hub/app/global.css`
 * (communication-hub origin/main c2bfa2a, 2026-10-13): lime primary #E0FF33
 * with #1B1B1B text, lavender nav pill #F2E1FF, lavender unread #DEC5F0,
 * lime-tint staff bubble #FDFEF4, office colours by office. Minerva/comhubuix
 * (`src/theme/tokens.css`, commit 5bfdc37) supplies the extras: shadows, the
 * radius scale, the status bg/fg pairs and the named palette (lavender, olive,
 * chat-blue …). Values marked "new" are CareHub decisions recorded in
 * .agnt/carehub/ui-refactor/SPEC.md §2.1 (D1, D8). Pages use var(--…) only.
 */

:root {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- sizes (SPEC §2.3) ---- */
  --header-h: 61px;
  --control-h: 43px;
  --control-h-sm: 40px;
  --control-h-xs: 32px;
  --segment-h: 44px;
  --tabbar-h: 64px;

  /* ---- radii: comhub signature 13px control radius ---- */
  --radius-control: 13px;
  --radius-bubble: 8.75px;
  --radius-card: 16px;
  --radius-column: 16px 16px 24px 24px;
  --radius-dialog: 24px;
  --radius-chip: 6px;
  --radius-full: 9999px;
  /* minerva names kept as aliases so older page CSS keeps working */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 13px;
  --radius-xl: 16px;
  --radius-2xl: 24px;

  --transition-duration: 150ms;
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---- colour: comhub light ---- */
  --color-page: #f4f4f4;
  --color-background: #f4f4f4;
  --color-surface: #fdfdfd;
  --color-card: #ffffff;
  --color-foreground: #1b1b1b;
  --color-foreground-secondary: #878b7e;
  --color-muted: #8a8a8a;
  --color-border: #eff0ed;
  --color-border-subtle: #f3f4f6;
  --color-input: #eff0ed;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-primary: #e0ff33;
  --color-primary-foreground: #1b1b1b;
  --color-primary-hover: #d4f21f;
  --color-link: #4d7feb;
  --color-danger: #e7000b;
  --color-warning: #f54900;
  --color-success: #15803d;
  --color-on-dark: #ffffff;
  --color-tooltip-bg: #1b1b1b;
  --color-tooltip-fg: #ffffff;

  --color-status-pending-bg: #f7f1fd;
  --color-status-pending-fg: #8200db;
  --color-status-completed-bg: #f0fdf4;
  --color-status-completed-fg: #15803d;
  --color-status-archived-bg: #f6f6f6;
  --color-status-archived-fg: #565656;

  --color-nav-active-bg: #f2e1ff;
  --color-nav-active-fg: #1b1b1b;
  --color-segment-bubble: #f2e1ff;
  --color-segment-active-fg: #1b1b1b;
  --color-unread-bg: #dec5f0;
  --color-unread-fg: #1b1b1b;
  --color-badge-alert: #e7000b;

  --color-bubble-in: var(--color-card);
  --color-bubble-staff: #fdfef4;
  --color-bubble-staff-border: transparent;
  --color-note-border: #c5dc2a;

  --color-focus: #1b1b1b;
  --color-focus-halo: rgba(224, 255, 51, 0.9);
  --color-avatar-user: #3b82f6;
  --color-avatar-fg: #ffffff;

  --color-priority-high: #c10007;
  --color-priority-med: #bb4d00;
  --color-priority-low: #314158;

  /* office palette (comhub, by office) */
  --office-ECB: #4d7feb;
  --office-FLS: #839718;
  --office-GNV: #445e9a;
  --office-JCR: #505d0a;
  --office-LAW: #8755aa;
  --office-ROS: #839718;
  --office-SSP: #4d7feb;
  --office-WDS: #445e9a;
  --office-default: #1b1b1b;

  --page-gradient: radial-gradient(38% 42% at 26% 52%, rgba(218, 183, 243, 0.55), transparent 70%),
    radial-gradient(46% 52% at 58% 62%, rgba(224, 255, 51, 0.38), transparent 72%);

  --shadow-card: 0 1px 2px rgba(28, 39, 84, 0.05), 0 4px 16px rgba(28, 39, 84, 0.04);
  --shadow-elevated: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* minerva named palette */
  --color-white: #ffffff;
  --color-midnight: #1b1b1b;
  --color-lavender: #dab7f3;
  --color-lavender-80: #8755aa;
  --color-lavender-light: #eee6f4;
  --color-lavender-pill: #f2e1ff;
  --color-chat-blue: #e2ebff;
  --color-blue-dark: #445e9a;
  --color-olive: #839718;
  --color-olive-dark: #505d0a;
  --color-lime: #e0ff33;
}

.dark {
  --color-page: #2f2f32;
  --color-background: #111113;
  --color-surface: #16161a;
  --color-card: #272730;
  --color-foreground: #f4f4f2;
  --color-foreground-secondary: #a0a0a8;
  --color-muted: #66666e;
  --color-border: rgba(255, 255, 255, 0.16);
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-input: #2c2c35;
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-primary: #e0ff33;
  --color-primary-foreground: #111111;
  --color-primary-hover: #ebff70;
  --color-link: #82aeff;
  --color-danger: #ff6b6b;
  --color-warning: #ffb464;
  --color-success: #c8f0c8;
  --color-tooltip-bg: #f4f4f2;
  --color-tooltip-fg: #111113;

  --color-status-pending-bg: rgba(218, 183, 243, 0.12);
  --color-status-pending-fg: #dab7f3;
  --color-status-completed-bg: rgba(139, 215, 139, 0.12);
  --color-status-completed-fg: #c8f0c8;
  --color-status-archived-bg: #32323e;
  --color-status-archived-fg: #a0a0a8;

  --color-nav-active-bg: var(--color-card);
  --color-nav-active-fg: #e0ff33;
  --color-segment-bubble: #111113;
  --color-segment-active-fg: #e0ff33;
  --color-unread-bg: #dab7f3;
  --color-unread-fg: #1b1b1b;
  --color-badge-alert: #ff6b6b;

  --color-bubble-in: #272730;
  --color-bubble-staff: #1e2a1e;
  --color-bubble-staff-border: rgba(224, 255, 51, 0.15);
  --color-note-border: rgba(224, 255, 51, 0.45);

  --color-focus: #e0ff33;
  --color-focus-halo: transparent;
  --color-avatar-fg: #111113;

  --color-priority-high: #ff8a8a;
  --color-priority-med: #ffb464;
  --color-priority-low: #a8b8d8;

  --office-ECB: #82aeff;
  --office-FLS: #c3d84a;
  --office-GNV: #8fa6e0;
  --office-JCR: #a3b33c;
  --office-LAW: #c9a0e6;
  --office-ROS: #c3d84a;
  --office-SSP: #82aeff;
  --office-WDS: #8fa6e0;
  --office-default: #f4f4f2;

  --page-gradient: none;

  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 4px 6px -4px rgba(0, 0, 0, 0.5), 0 10px 15px -3px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}