/* Sentinel Pulse design tokens.
   The interface base is blue. The logo keeps its own colours (a deep teal-navy cross with green leaves, sampled
   from public/logo-512.png); green is used only to mean "done / OK". Change the values here and the whole
   application follows.
   Rules of use: deep blue gives structure and authority (headings, primary buttons, active navigation);
   the lighter blue accent marks selection and focus; status colours always carry a mark or a word as well,
   never colour alone. */

:root {
  color-scheme: light;

  /* brand */
  --sentinel-blue: #1d4e89;          /* primary: buttons, headings, active navigation (8.4:1 with white) */
  --sentinel-blue-hover: #163c6b;
  --sentinel-accent: #4a90d9;        /* lighter blue: fills and markers (3.3:1 on white, so never small text) */
  --sentinel-link: #1a5ba6;          /* blue for text, links and icons on light surfaces (6.8:1) */
  --sentinel-soft: #e3ecf7;          /* pale blue surface */

  /* surfaces */
  --background: #ffffff;             /* the main workspace */
  --sidebar: #eef3f9;                /* page frame and navigation */
  --card: #f5f8fc;                   /* cards on the workspace */
  --secondary: #e3ecf7;              /* hover, selected, chips */
  --muted-bg: #e3ecf7;
  --elevated: #ffffff;               /* menus, dialogs */
  --border: #d7e1ee;
  --input: #7487a0;                  /* form control borders: 3.7:1 against white */
  --hover: color-mix(in oklch, #1d4e89 7%, transparent);

  /* text */
  --foreground: #1b2a3a;
  --muted: #53647a;
  --primary: var(--sentinel-blue);
  --primary-fg: #ffffff;
  --link: var(--sentinel-link);
  --ring: var(--sentinel-link);

  /* status: text colour on its own tinted background (all at least 5:1) */
  --ok: #1f6b4d;     --ok-bg: #e3f2ea;
  --warn: #8a5a00;   --warn-bg: #fcf1dc;
  --bad: #b3261e;    --bad-bg: #fce8e6;
  --info: #1d5f8f;   --info-bg: #e4eff8;
  --bad-ink: var(--bad); --info-ink: var(--info);
  /* solid status colours for bars and dots (not for text) */
  --green: #3f9a73; --amber: #d99a1e; --red: #cf3b2f; --blue: #3a82bf; --violet: #7468b8;

  /* charts: distinguishable by lightness as well as hue; series are also labelled in the chart */
  --chart-1: #1d4e89; --chart-2: #3f9a73; --chart-3: #c9892b; --chart-4: #4a90d9; --chart-5: #7468b8; --chart-6: #8a97a8;

  /* legacy names still used in page styles */
  --ink: var(--foreground); --line: var(--border); --bg: var(--sidebar); --brand: var(--primary);
  --brand-dark: var(--foreground); --brand-soft: var(--secondary);

  /* shape, depth, motion */
  --radius: .625rem; --radius-sm: .4rem;
  --shadow: 0 1px 2px rgb(29 78 137 / 7%);
  --shadow-pop: 0 8px 24px rgb(29 78 137 / 16%);
  --focus: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: 140ms;

  /* layout */
  --side-w: 16rem; --side-w-icon: 4.75rem;

  /* type scale (Geist, self-hosted, tabular numerals available) */
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-kpi: 1.875rem;
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sentinel-blue: #7db2f0; --sentinel-blue-hover: #99c4f5; --sentinel-accent: #7db2f0; --sentinel-link: #8fc0f5; --sentinel-soft: #223452;
    --background: #131f33; --sidebar: #0a1220; --card: #1a2a42; --secondary: #223452; --muted-bg: #223452; --elevated: #1f3050;
    --border: #2c4163; --input: #8da3bf; --hover: rgb(255 255 255 / 6%);
    --foreground: #e6eef8; --muted: #9db0c8; --primary-fg: #0b1626; --link: #8fc0f5; --ring: #a9cdf7;
    --ok: #8fd0ae; --ok-bg: #173628; --warn: #f0c97a; --warn-bg: #3a2d10; --bad: #f0b0a8; --bad-bg: #3a1f1f; --info: #9cc8ec; --info-bg: #172f44;
    --green: #5fbf94; --amber: #e0b04a; --red: #e87d72; --blue: #6fb0e3; --violet: #a49ae0;
    --chart-1: #7db2f0; --chart-2: #5fbf94; --chart-3: #e0b04a; --chart-4: #a9cdf7; --chart-5: #a49ae0; --chart-6: #9db0c8;
    --shadow: none; --shadow-pop: 0 8px 24px rgb(0 0 0 / 45%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sentinel-blue: #7db2f0; --sentinel-blue-hover: #99c4f5; --sentinel-accent: #7db2f0; --sentinel-link: #8fc0f5; --sentinel-soft: #223452;
  --background: #131f33; --sidebar: #0a1220; --card: #1a2a42; --secondary: #223452; --muted-bg: #223452; --elevated: #1f3050;
  --border: #2c4163; --input: #8da3bf; --hover: rgb(255 255 255 / 6%);
  --foreground: #e6eef8; --muted: #9db0c8; --primary-fg: #0b1626; --link: #8fc0f5; --ring: #a9cdf7;
  --ok: #8fd0ae; --ok-bg: #173628; --warn: #f0c97a; --warn-bg: #3a2d10; --bad: #f0b0a8; --bad-bg: #3a1f1f; --info: #9cc8ec; --info-bg: #172f44;
  --green: #5fbf94; --amber: #e0b04a; --red: #e87d72; --blue: #6fb0e3; --violet: #a49ae0;
  --chart-1: #7db2f0; --chart-2: #5fbf94; --chart-3: #e0b04a; --chart-4: #a9cdf7; --chart-5: #a49ae0; --chart-6: #9db0c8;
  --shadow: none; --shadow-pop: 0 8px 24px rgb(0 0 0 / 45%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}