/* Vektr colors, defined once by name (D87). Pages pull these by variable name; change a color here and it changes everywhere.
   Glacial cyan is the main color; burnt vermilion is the only orange; charcoal for dark backgrounds; graphite for text.
   Tints and shades are derived for chips, warnings and dark mode. (The main dashboard still has its own copy until IDEAS I131.) */
:root {
  --glacial-cyan: #34b6c5;
  --cyan-deep: #0b7684;      /* links and small text on light backgrounds */
  --cyan-light: #8adde6;     /* links and small text on charcoal */
  --cyan-tint: #eefafb;
  --cyan-soft: #d3eff3;
  --on-cyan: #10262a;        /* text on glacial cyan */
  --burnt-vermilion: #d95736;
  --vermilion-deep: #9a3a22; /* text on the vermilion tint */
  --vermilion-tint: #fbe4dc;
  --vermilion-line: #f3c3b3;
  --charcoal: #404040;
  --graphite: #101217;
  --light-neutral: #f5f6f6;
  --white: #ffffff;

  /* roles (what pages use) */
  --page: var(--light-neutral); --card: var(--white); --ink: var(--graphite); --muted: #5b5e60; --line: #e3e6e6; --soft: #eef0f0;
  --link: var(--cyan-deep); --panel: var(--charcoal); --on-panel: var(--light-neutral); --panel-muted: #d6d9d9; --panel-link: var(--cyan-light);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: var(--charcoal); --card: #4a4a4b; --ink: var(--light-neutral); --muted: #d6d8d8; --line: #5e6061; --soft: #555657;
    --link: var(--cyan-light); --panel: #2f3030; --cyan-tint: #3f6268; --cyan-soft: #3f6268; --vermilion-tint: #6e4537; --vermilion-deep: #ffe6dc; --vermilion-line: #8a5a48;
    --shadow: 0 1px 2px rgba(0,0,0,.2), 0 6px 24px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: var(--charcoal); --card: #4a4a4b; --ink: var(--light-neutral); --muted: #d6d8d8; --line: #5e6061; --soft: #555657;
  --link: var(--cyan-light); --panel: #2f3030; --cyan-tint: #3f6268; --cyan-soft: #3f6268; --vermilion-tint: #6e4537; --vermilion-deep: #ffe6dc; --vermilion-line: #8a5a48;
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 6px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}

/* App extras (T-034): everything the app, Admin and the extension used to spell out as loose hex, named once here.
   Tier scale: Pass is neutral and each step up is more cyan; Priority is the brand cyan itself. */
:root {
  --glacial-mid: #6ecbd6; --glacial-soft: #a6e0e7; --cyan-teal: #1f8a98;
  --faint: #686b6d; --nav: var(--light-neutral); --logo: var(--charcoal);
  --weak: var(--vermilion-deep);
  --st-bg: var(--vermilion-tint); --st: var(--vermilion-deep);
  --t-pass-bg: #eceeee; --t-pass: #4a4c4e; --t-consider-bg: var(--cyan-soft); --t-consider: var(--graphite);
  --t-apply-bg: var(--glacial-soft); --t-apply: var(--graphite); --t-strong-bg: var(--glacial-mid); --t-strong: var(--on-cyan);
  --t-priority-bg: var(--glacial-cyan); --t-priority: var(--on-cyan);
  --r-pass: #b5b8ba; --r-consider: var(--cyan-soft); --r-apply: var(--glacial-soft); --r-strong: var(--glacial-mid); --r-priority: var(--glacial-cyan);
  --scrim: rgba(16,18,23,.45);
  --band: #dcecee; /* card header band: visibly tinted against the page in light mode */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --faint: #c6c9c9; --nav: #383839; --logo: var(--light-neutral); --weak: #ff9b7a; --band: var(--soft);
    --t-pass-bg: #5b5c5e; --t-pass: #eef0f0; --t-consider-bg: #3f6268; --t-consider: var(--light-neutral);
    --t-apply-bg: #3b818b; --t-apply: var(--light-neutral); --t-strong-bg: #30a2b0;
    --r-pass: #808384; --r-consider: #3f6268; --r-apply: #3b818b; --r-strong: #30a2b0;
  }
}
:root[data-theme="dark"] {
  --faint: #c6c9c9; --nav: #383839; --logo: var(--light-neutral); --weak: #ff9b7a; --band: var(--soft);
  --t-pass-bg: #5b5c5e; --t-pass: #eef0f0; --t-consider-bg: #3f6268; --t-consider: var(--light-neutral);
  --t-apply-bg: #3b818b; --t-apply: var(--light-neutral); --t-strong-bg: #30a2b0;
  --r-pass: #808384; --r-consider: #3f6268; --r-apply: #3b818b; --r-strong: #30a2b0;
}