/* Ethnus screen tokens. Version 1.0, 15 November 2026.
   Source of truth: https://brand.ethnus.com/ . Copy this file whole, or import it.
   Light first, then dark twice: once for the device setting, once for a theme switch
   that sets <html data-theme="dark"> or "light". */

:root {
  /* Brand */
  --brand: #5350ff;          /* the one accent: one filled button per screen, links, focus ring, current step, unread count */
  --brand-hover: #4542e6;
  --brand-contrast: #ffffff; /* text on a brand fill */

  /* Neutrals */
  --page: #f3f3f6;           /* page behind cards */
  --surface: #ffffff;        /* cards, panels, top bar, side panel */
  --line: #e1e1e8;           /* every 1 px border and divider */
  --ctl-line: #8a8a99;       /* input and secondary button borders */
  --ink: #14141b;            /* text and headings */
  --muted: #5a5a72;          /* secondary text, labels */
  --faint: #8a8a99;          /* icons and disabled marks only, never text */
  --sel: #e6e5ff;            /* behind the selected item only */
  --sel-ink: #4340e0;        /* text on --sel */
  --hover: #f6f6f9;          /* row and item hover */
  --soft: #f3f3f6;           /* quiet fills: code chips, read-only fields */
  --badge: #e8e8ee;          /* count badges, with --ink numbers */

  /* Status: an 8 px dot and the word */
  --ok: #188038;   --ok-bg: #eff7f1;
  --warn: #b45309; --warn-bg: #fbf3ea;
  --err: #c5221f;  --err-bg: #fcefee;
  --off: #8a8a99;
  --info: #5350ff;

  /* Test copies only: top bar strip and email bar of a test or staging copy */
  --qa: #e8650a;

  /* Charts, in this order */
  --chart-1: #5350ff; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
  --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #2a78d6; --chart-8: #e34948;

  /* Type */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-email: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Shape and depth */
  --radius: 8px;             /* cards, tables, modals, messages, toasts, menus */
  --radius-ctl: 6px;         /* buttons, inputs, menu items */
  --radius-pill: 999px;      /* chips, avatars */
  --shadow-pop: 0 12px 32px -12px rgba(20, 20, 27, .28); /* floating layers only */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand: #7b78ff; --brand-hover: #928fff; --brand-contrast: #0e0e16;
    --page: #0e0e16; --surface: #14141f;
    --line: #2c2b45; --ctl-line: #77769a;
    --ink: #f4f4fb; --muted: #a9a8c7; --faint: #7d7c99;
    --sel: #26255a; --sel-ink: #b1afff; --hover: #1d1d30; --soft: #1a1a28; --badge: #2c2b45;
    --ok: #5bb974; --ok-bg: #16291e;
    --warn: #e3a35c; --warn-bg: #2d2116;
    --err: #f28b82; --err-bg: #2f1a1c;
    --off: #8d8ca8; --info: #7b78ff;
    --chart-1: #7b78ff; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
    --chart-5: #d55181; --chart-6: #008300; --chart-7: #3987e5; --chart-8: #e66767;
    --shadow-pop: 0 12px 32px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --brand: #7b78ff; --brand-hover: #928fff; --brand-contrast: #0e0e16;
  --page: #0e0e16; --surface: #14141f;
  --line: #2c2b45; --ctl-line: #77769a;
  --ink: #f4f4fb; --muted: #a9a8c7; --faint: #7d7c99;
  --sel: #26255a; --sel-ink: #b1afff; --hover: #1d1d30; --soft: #1a1a28; --badge: #2c2b45;
  --ok: #5bb974; --ok-bg: #16291e;
  --warn: #e3a35c; --warn-bg: #2d2116;
  --err: #f28b82; --err-bg: #2f1a1c;
  --off: #8d8ca8; --info: #7b78ff;
  --chart-1: #7b78ff; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
  --chart-5: #d55181; --chart-6: #008300; --chart-7: #3987e5; --chart-8: #e66767;
  --shadow-pop: 0 12px 32px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* Print look (decks and A4). Not for screens or email. */
.print, :root.print {
  --primary: #7c82e0;
  --primary-dark: #5f65c9;
  --link: #6c6ff5;
  --band: #f0f1fb;
  --accent-fill: #eff0fb;
  --stat-fill: #f6f8fd;
  --wash: #f7f8fe;
  --rule: #e4e6f8;
  --rule-strong: #cdd0f2;
  --chevron: #b9bce6;
  --ink: #1a1a1f;
  --ink-2: #45455c;
  --ink-muted: #5a5a72;
  --ink-soft: #7a7a90;
  --ink-faint: #9a9aae;
}