/* Design tokens of the desktop app (wms-ui). Every color, shadow and corner radius of frontend/src comes from here:
   screen CSS files and TSX use var(--token) and never a literal color (guard: theme.test.ts).
   Light theme ("Claro") on :root; dark theme ("Escuro") on :root[data-theme=dark], only on screen, so printing is always light.
   The attribute is set before the first paint by public/theme-init.js and switched by ThemeToggle (theme.ts). */
:root {
   color-scheme: light;
   /* Corners: small for chips/tags, default for fields/buttons/rows, large for cards/panels/dialogs. Round shapes (avatars, dots, knobs) keep 50%. */
   --radius-xs: 2px;
   --radius-sm: 3px;
   --radius: 4px;
   --radius-lg: 4px;
   /* Canvas, surfaces and lines. */
   --bg: #e1e8ee;
   --surface: #f3f6f9;
   --surface-2: #e8eef3;
   --surface-3: #dbe4eb;
   --field-bg: #fafcfd;
   --hover: #e3ebf1;
   --border-subtle: #d4dee6;
   --border: #c4d1db;
   --border-strong: #9db0bf;
   /* Text. All of them keep WCAG AA (4.5:1) on surface, surface-2 and field-bg; placeholder is decorative (3:1). */
   --text: #0f2230;
   --text-2: #2a4458;
   --text-muted: #455e71;
   --text-faint: #4b6477;
   --text-placeholder: #73858f;
   --on-fill: #ffffff;
   --on-orange: #04121a;
   /* Brand tones (cards, PageIcon, legends): tone = icon/accent color, tint = its soft background.
      Drism brand (2026-11-05, assets/drims.png): --orange is the ACTION color of the brand, teal (the name stays so no screen CSS changes);
      the accent family below follows it. Blue and primary/info are a petrol blue of the brand; warning, success and danger keep their hues
      (warning is also the color of attention: divergent and pending rows, hints, excess, holds). */
   --orange: #13c8de;
   --orange-hover: #3dd5e7;
   --blue: #156aab;
   --purple: #7c3aed;
   --slate: #374151;
   --orange-tint: #d3eff4;
   --blue-tint: #d6e8f2;
   --purple-tint: #e7ddfa;
   --slate-tint: #dbe1e7;
   --purple-fill: #7c3aed;
   /* Status families: base (fills, strong borders), -text (text on surfaces and on -soft/-faint), -soft (chips, badges), -faint (rows, panels), -border. */
   --primary: #1171a3;
   --primary-text: #0d4f73;
   --primary-soft: #d6e8f2;
   --primary-faint: #e3eff6;
   --primary-border: #9cc4dc;
   --accent: var(--orange);
   --accent-text: #075f6d;
   --accent-soft: #d3eff4;
   --accent-faint: #e3f4f7;
   --accent-border: #8fd3df;
   --warning: #b45309;
   --warning-text: #7a3c07;
   --warning-soft: #f4e4bb;
   --warning-faint: #f6ecd6;
   --warning-border: #dbbd74;
   --success: #2f7a4d;
   --success-text: #1d5c35;
   --success-soft: #d3eadb;
   --success-faint: #e0efe6;
   --success-border: #9ccaae;
   --danger: #c8302a;
   --danger-text: #97231a;
   --danger-soft: #f4d9d3;
   --danger-faint: #f6e4e0;
   --danger-border: #dfa598;
   --info: var(--primary);
   --info-text: var(--primary-text);
   --info-soft: var(--primary-soft);
   --info-border: var(--primary-border);
   --purple-text: #55319d;
   --purple-soft: #e4dbf8;
   --purple-faint: #ece7f8;
   --purple-border: #c2b1ea;
   --indigo-text: #352e9e;
   --indigo-soft: #dfe1f9;
   /* Chips of the compact lists. */
   --chip-bg: var(--primary-soft);
   --chip-text: var(--primary-text);
   --chip-neutral-bg: var(--surface-3);
   --chip-neutral-text: var(--text-muted);
   /* Shadow colors, focus ring and overlay. */
   --shadow-sm: rgba(6, 21, 32, .08);
   --shadow: rgba(6, 21, 32, .14);
   --shadow-orange: rgba(19, 200, 222, .25);
   --focus-ring: #0a8ea4;
   --focus-shadow: rgba(10, 142, 164, .22);
   --scrim: rgba(4, 14, 21, .55);
   /* Tones that never change with the theme (2026-10-25: the last literals of the screen CSS came here, so this file is the ONE place of the colors).
      Print: the printed sheets (labels, reports, manifest) are black ink on white paper, always, so the dark theme never overrides these. */
   --print-ink: #000000;
   --print-paper: #ffffff;
   --scrim-light: rgba(4, 14, 21, .45);
   /* Color of the browser bar (meta theme-color of Components/App.razor, read from here by ThemeColors). */
   --browser-chrome: #061520;
   /* Charts: the occupancy donut and the legends share the brand tones (chart-blue/purple/slate follow --blue/--purple/--slate in both themes). */
   --chart-orange: var(--orange);
   --chart-orange-light: #7fdfeb;
   --chart-blue: var(--blue);
   --chart-blue-light: #6fb3e0;
   --chart-purple: var(--purple);
   --chart-slate: var(--slate);
   --chart-red: #d0646c;
   --chart-muted: #b3bec9;
   --chart-track: #d8dfe6;
   --chart-grid: #d2d9e0;
   /* Sidebar (dark in both themes). */
   --sidebar-bg: #061520;
   --sidebar-surface: #0b2635;
   --sidebar-border: #16384a;
   --sidebar-hover: #0f2d3e;
   --sidebar-text: #a3bccb;
   --sidebar-text-strong: #eaf4f8;
   --sidebar-muted: #86a2b2;
   --sidebar-active-bg: rgba(19, 200, 222, .14);
   --sidebar-active-text: #45d9ea;
   /* Login brand panel and brand colors (always dark, theme independent; logo assets/drims.png). */
   --art-bg: #061520;
   --art-bg-2: #0b2635;
   --art-text: #ffffff;
   --art-muted: #9fb3bf;
   --art-body: #a9bcc7;
   --art-line: rgba(122, 196, 214, .3);
   --art-band: rgba(19, 200, 222, .5);
   --art-band-soft: rgba(19, 200, 222, .12);
   --art-glow: rgba(19, 200, 222, .14);
   --art-pillar: #b9cad3;
   --art-footer: #7d95a2;
   --art-footer-line: rgba(82, 128, 146, .35);
   --brand-teal: #13c8de;
   --brand-gold: #f2b53a;
   --art-logo-shadow: rgba(0, 0, 0, .45);
   --brand-accent-text: #077384;
   /* Primary buttons (save, create, sign in): the Drism yellow, the same in both themes (decision of the user, 2026-11-05). */
   --button-primary: #f2b53a;
   --button-primary-hover: #f7c55c;
   --on-button-primary: #04121a;
   --button-primary-shadow: rgba(242, 181, 58, .28);
   /* Scannable labels on screen (Code 128 of the apartment, wms-addresses): black bars on a white quiet-zone box in BOTH themes, like paper,
    so a handheld reads them from the monitor. Documented exception to theming: never redefined in the dark block. */
   --label-paper: #ffffff;
   --label-ink: #000000;
}

@media screen {
   :root[data-theme=dark] {
      color-scheme: dark;
      scrollbar-color: #36586d #081923;
      --bg: #06121b;
      --surface: #0c1d29;
      --surface-2: #102533;
      --surface-3: #163041;
      --field-bg: #081923;
      --hover: #12293a;
      --border-subtle: #15303f;
      --border: #1f3b4d;
      --border-strong: #36586d;
      --text: #e4eef3;
      --text-2: #c3d4dd;
      --text-muted: #9fb5c2;
      --text-faint: #90a8b5;
      --text-placeholder: #67808e;
      --on-fill: #ffffff;
      --on-orange: #04121a;
      --orange: #13c8de;
      --orange-hover: #3dd5e7;
      --blue: #5aaee6;
      --purple: #ad92fb;
      --slate: #9aa7b6;
      --orange-tint: #0f3440;
      --blue-tint: #11304a;
      --purple-tint: #2c2448;
      --slate-tint: #27323e;
      --purple-fill: #6f42d6;
      --primary: #2b86bf;
      --primary-text: #8cc8ec;
      --primary-soft: #11304a;
      --primary-faint: #0e2638;
      --primary-border: #24506f;
      --accent-text: #5fdcec;
      --accent-soft: #0f3440;
      --accent-faint: #0c2731;
      --accent-border: #1f5a68;
      --warning: #a65f0c;
      --warning-text: #f3c06a;
      --warning-soft: #3a2e14;
      --warning-faint: #29231a;
      --warning-border: #6d5624;
      --success: #23824e;
      --success-text: #74d6a3;
      --success-soft: #173322;
      --success-faint: #15271d;
      --success-border: #2e5e41;
      --danger: #c4443a;
      --danger-text: #ff9c8e;
      --danger-soft: #3f1e1c;
      --danger-faint: #2e1c1c;
      --danger-border: #71352f;
      --purple-text: #cab2ff;
      --purple-soft: #2c2448;
      --purple-faint: #221d36;
      --purple-border: #4d3e7a;
      --indigo-text: #b7bbff;
      --indigo-soft: #262a4b;
      --shadow-sm: rgba(0, 0, 0, .35);
      --shadow: rgba(0, 0, 0, .5);
      --shadow-orange: rgba(19, 200, 222, .2);
      --brand-accent-text: #45d9ea;
      --focus-ring: #45d9ea;
      --focus-shadow: rgba(69, 217, 234, .28);
      --scrim: rgba(0, 0, 0, .6);
      --chart-blue-light: #93cdf0;
      --chart-red: #e0848a;
      --chart-muted: #4c6676;
      --chart-track: #163041;
      --chart-grid: #1a3445;
      --sidebar-bg: #040e15;
      --sidebar-surface: #0a1d29;
      --sidebar-border: #132f3e;
      --sidebar-hover: #0d2533;
   }
}