/* CarChart color tokens. Light is the default; set data-theme="dark" on any ancestor for dark. */
:root {
  /* Surfaces */
  --paper: #f6f7f4;          /* page background: off-white with a grey-green cast, like chart paper */
  --panel: #ffffff;          /* cards and panels */
  --grid: #dfe5e0;           /* chart-paper grid */
  --grid-strong: #cbd4cd;
  --line: #d5dcd6;           /* decorative borders: cards, dividers, table rules */
  --edge: #808982;           /* control borders: inputs, checkboxes, radios, switch track. 3:1+ on paper and panel; same value in both themes */

  /* Ink */
  --ink: #22303f;            /* text: night, the logo's color. 12.5:1 on paper */
  --ink-2: #445261;          /* secondary text: night's hue at the old lightness. 7.4:1 on paper */
  --ink-3: #5f6b78;          /* labels, captions: night's hue. 4.5:1+ on paper, panel and every soft background */

  /* Brand */
  --night: #22303F;          /* logo mark on light, app icon ground */
  --accent: #1f5c8f;         /* steel blue: links, primary button, the one series of a chart (line, bars or points) */
  --accent-ink: #ffffff;     /* text on the accent */
  --accent-soft: #e2ecf5;    /* soft accent background */
  --accent-mid: #3d82c4;     /* same value in both themes. Graphics only, never text */
  --steel: #6F7A82;          /* tool-steel grey: neutral marks. Graphics and large text only, never body text */
  --route: #4F6D8F;          /* quieter blue for charts and illustration; chart color 1 */

  /* States */
  --lamp: #c9840a;           /* amber, the warning lamp: findings, "Watch" pill, marked points, the lit pin */
  --lamp-ink: #935f05;       /* amber text: "Watch" labels, finding titles. Use instead of --lamp for text */
  --lamp-soft: #fbefd6;
  --good: #1f7a3a;           /* good states; also passes as text on paper, panel, good-soft */
  --good-soft: #e1f7e4;      /* soft background for good states */
  --alarm: #94020d;          /* red, act now: critical findings, the "Act now" pill, alarm icons */
  --alarm-ink: #94020d;      /* red text. Same as --alarm in light; lighter in dark */
  --alarm-soft: #fee7e4;     /* soft background for critical states */
  --trace-fill: rgba(31, 92, 143, 0.10); /* area under a line only; never on bars */

  /* Charts: series order for multi-signal charts. 3:1+ on panel in both themes */
  --chart-1: var(--route);   /* first series */
  --chart-2: #2e97ca;        /* sky */
  --chart-3: #0b9488;        /* teal */
  --chart-4: #6673c1;        /* indigo */
  /* Shared: one value for both themes, for chart tools with no theme switch (e.g. Grafana) */
  --chart-trace-shared: var(--accent-mid); /* #3d82c4: 4.05 on white, 4.27 on Grafana dark */
  --chart-1-shared: #4F6D8F; /* 5.36 on white, 3.22 on Grafana dark */

  /* Sequential ramp, low to high. Middle steps are even mixes of the ends. --ramp-1 and --ramp-5 are set with the aliases below */
  --ramp-2: #b1c8dc;         /* 1.73 on panel */
  --ramp-3: #81a4c2;         /* 2.62 */
  --ramp-4: #5080a9;         /* 4.20 */

  /* Logo */
  --logo-mark: var(--night);
  --logo-pins: #ffffff;
  --logo-lamp: var(--lamp);
  --logo-word-car: var(--night);
  --logo-word-chart: var(--lamp);
  --logo-icon-ground: #22303F; /* app icon is the same in both themes */
  --logo-icon-mark: #f6f7f4;

  /* QR codes: a white ground in both themes so cameras can read them */
  --qr-ground: #ffffff;
  --qr-module: var(--ink);
}

/* Semantic aliases: declared on both scopes so they re-resolve under data-theme="dark" */
:root, [data-theme="dark"] {
  --surface-page: var(--paper);
  --surface-card: var(--panel);
  --surface-sunken: var(--grid);
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --border-default: var(--line);
  --border-strong: var(--grid-strong);
  --border-control: var(--edge);
  --link: var(--accent);
  --link-hover: var(--ink);
  --button-primary-bg: var(--accent);
  --button-primary-fg: var(--accent-ink);
  --finding: var(--lamp);
  --finding-soft: var(--lamp-soft);
  --finding-text: var(--lamp-ink);
  --state-good: var(--good);
  --state-good-soft: var(--good-soft);
  --state-alarm: var(--alarm);
  --state-alarm-soft: var(--alarm-soft);
  --state-alarm-text: var(--alarm-ink);
  --focus-ring: var(--accent);
  /* Ramp ends */
  --ramp-1: var(--accent-soft); /* 1.20 light, 1.17 dark: cells sit 2px apart on panel */
  --ramp-5: var(--accent);      /* 7.03 light, 7.40 dark */
  /* Diverging pair. The middle is the reference; neither end is a state color */
  --diverge-low: var(--chart-4);
  --diverge-mid: var(--grid-strong);
  --diverge-high: var(--chart-3);
  /* Chart roles: each names an existing token, no new hues */
  --chart-reference: var(--steel);  /* dashed reference line, 1.5px; 4.39 on white */
  --chart-range: var(--accent-soft); /* typical range band; never green */
  --chart-muted: var(--edge);        /* series not selected, 1.5px; 3:1+ both themes. No opacity */
  --chart-axis: var(--line);
  --chart-gridline: var(--grid);
  --chart-label: var(--ink-3);
}

[data-theme="dark"] {
  --paper: #0f1412;
  --panel: #171e1b;
  --grid: #1f2824;
  --grid-strong: #2a3530;
  --line: #2b3631;
  --ink: #edf1ee;
  --ink-2: #b4beb9;
  --ink-3: #89958f;
  --night: #1a2531;
  --accent: #7fb0dd;
  --accent-ink: #0d1a26;
  --accent-soft: #1c2b38;
  --steel: #9aa4ab;
  --route: #8fa9c6;
  --lamp: #e7a93a;
  --lamp-ink: #e7a93a;
  --lamp-soft: #35290f;
  --good: #62c482;
  --good-soft: #193020;
  --alarm: #d24d45;
  --alarm-ink: #e07167;
  --alarm-soft: #3e211f;
  --trace-fill: rgba(127, 176, 221, 0.12);
  --chart-1: var(--route);
  --ramp-2: #354c61;         /* 1.90 on panel */
  --ramp-3: #4e6e8b;         /* 3.17 */
  --ramp-4: #668fb4;         /* 4.97 */
  /* Shared with light (pass in both): --edge, --accent-mid,
     --chart-2 to --chart-4, --chart-trace-shared,
     --chart-1-shared. Never override. */
  --logo-mark: #edf1ee;
  --logo-pins: #1a2531;
  --logo-word-car: #edf1ee;
  --logo-lamp: var(--lamp);
  --logo-word-chart: var(--lamp);
  --qr-module: var(--paper);
}