/* UX4Gsmartia portable palette library — the "colour choice" layer.
   Eight named palettes, each with a light and a dark mode. Every palette
   defines the complete brand, secondary, neutral, focus and disabled contract,
   so switching a theme never leaves a component on a stale value.
   Status colours (success, warning, danger, info) stay semantic and are
   inherited from ui-kit.css; a palette may override them only with a contrast
   check. Geometry, typography, spacing, motion and focus behaviour never
   change with a palette.

   Usage:
     <html data-ui-theme="teal" data-ui-mode="light">
   Switching at runtime is handled by ui-kit.js through
   [data-ui-theme-set] and [data-ui-mode-set].

   To add a palette, copy one block, keep every variable listed, and verify
   normal text, control labels, on-brand text, selected navigation, focus ring,
   disabled controls and status treatments before shipping it. */

/* ============================================================
   1. violet — default Smartia palette
   ============================================================ */

[data-ui-theme="violet"],
[data-ui-theme="default"] {
  --ui-brand: #4a2bc2;
  --ui-brand-hover: #3b229c;
  --ui-brand-active: #2d1978;
  --ui-brand-soft: #eeeaff;
  --ui-on-brand: #ffffff;
  --ui-secondary: #5d536e;
  --ui-secondary-hover: #4b435a;
  --ui-secondary-active: #393340;
  --ui-secondary-soft: #f0eef3;
  --ui-canvas: #f6f6fa;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f3f2f8;
  --ui-ink: #24212d;
  --ui-ink-soft: #5f5b6c;
  --ui-on-surface: #24212d;
  --ui-on-surface-muted: #5f5b6c;
  --ui-border: #dcd9e4;
  --ui-border-strong: #b4aec1;
  --ui-focus: #4a2bc2;
  --ui-disabled-surface: #eeedf1;
  --ui-disabled-border: #d9d5e2;
  --ui-on-disabled: #77717f;
}

[data-ui-theme="violet"][data-ui-mode="dark"],
[data-ui-theme="default"][data-ui-mode="dark"] {
  --ui-brand: #9b86f2;
  --ui-brand-hover: #ab99f5;
  --ui-brand-active: #bcabf7;
  --ui-brand-soft: #2c2350;
  --ui-on-brand: #17151d;
  --ui-secondary: #b3aac2;
  --ui-secondary-hover: #c3bcd0;
  --ui-secondary-active: #d2ccdc;
  --ui-secondary-soft: #302c38;
  --ui-canvas: #17151d;
  --ui-surface: #211e28;
  --ui-surface-subtle: #2a2633;
  --ui-ink: #f5f2fa;
  --ui-ink-soft: #c9c2d4;
  --ui-on-surface: #f5f2fa;
  --ui-on-surface-muted: #c9c2d4;
  --ui-border: #46414f;
  --ui-border-strong: #6f677d;
  --ui-focus: #b3a2f7;
  --ui-disabled-surface: #302c38;
  --ui-disabled-border: #46414f;
  --ui-on-disabled: #9b92a7;
}

/* ============================================================
   2. azure — corporate blue
   ============================================================ */

[data-ui-theme="azure"] {
  --ui-brand: #1d4ed8;
  --ui-brand-hover: #1a43b8;
  --ui-brand-active: #163a9c;
  --ui-brand-soft: #e8efff;
  --ui-on-brand: #ffffff;
  --ui-secondary: #475569;
  --ui-secondary-hover: #3b4759;
  --ui-secondary-active: #334155;
  --ui-secondary-soft: #eef2f7;
  --ui-canvas: #f5f7fb;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #eef2f9;
  --ui-ink: #16202e;
  --ui-ink-soft: #556274;
  --ui-on-surface: #16202e;
  --ui-on-surface-muted: #556274;
  --ui-border: #d5dde9;
  --ui-border-strong: #a9b6c9;
  --ui-focus: #1d4ed8;
  --ui-disabled-surface: #eaeef4;
  --ui-disabled-border: #d5dde9;
  --ui-on-disabled: #75808f;
}

[data-ui-theme="azure"][data-ui-mode="dark"] {
  --ui-brand: #7ea6ff;
  --ui-brand-hover: #96b7ff;
  --ui-brand-active: #b0caff;
  --ui-brand-soft: #1e2c4d;
  --ui-on-brand: #101623;
  --ui-secondary: #b0bcca;
  --ui-secondary-hover: #c1cbd7;
  --ui-secondary-active: #d1d9e2;
  --ui-secondary-soft: #222a38;
  --ui-canvas: #121722;
  --ui-surface: #1a202c;
  --ui-surface-subtle: #222a38;
  --ui-ink: #eef2f8;
  --ui-ink-soft: #b9c3d3;
  --ui-on-surface: #eef2f8;
  --ui-on-surface-muted: #b9c3d3;
  --ui-border: #3b4759;
  --ui-border-strong: #5b6a80;
  --ui-focus: #9dbcff;
  --ui-disabled-surface: #242c39;
  --ui-disabled-border: #3b4759;
  --ui-on-disabled: #8b95a4;
}

/* ============================================================
   3. teal — calm operational palette
   ============================================================ */

[data-ui-theme="teal"] {
  --ui-brand: #0f766e;
  --ui-brand-hover: #0c625c;
  --ui-brand-active: #0a4f4a;
  --ui-brand-soft: #e3f6f3;
  --ui-on-brand: #ffffff;
  --ui-secondary: #4a5b5a;
  --ui-secondary-hover: #3d4b4a;
  --ui-secondary-active: #33403f;
  --ui-secondary-soft: #edf2f1;
  --ui-canvas: #f4f8f8;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #ecf4f3;
  --ui-ink: #16211f;
  --ui-ink-soft: #536663;
  --ui-on-surface: #16211f;
  --ui-on-surface-muted: #536663;
  --ui-border: #d3e2df;
  --ui-border-strong: #a5bfbb;
  --ui-focus: #0f766e;
  --ui-disabled-surface: #e9f0ef;
  --ui-disabled-border: #d3e2df;
  --ui-on-disabled: #6f817e;
}

[data-ui-theme="teal"][data-ui-mode="dark"] {
  --ui-brand: #5cc9bd;
  --ui-brand-hover: #79d6cb;
  --ui-brand-active: #98e2d9;
  --ui-brand-soft: #16302e;
  --ui-on-brand: #0d1514;
  --ui-secondary: #a9bcb9;
  --ui-secondary-hover: #bccbc8;
  --ui-secondary-active: #ced9d7;
  --ui-secondary-soft: #1f2b2a;
  --ui-canvas: #101817;
  --ui-surface: #172120;
  --ui-surface-subtle: #1f2b2a;
  --ui-ink: #edf5f3;
  --ui-ink-soft: #b6c8c5;
  --ui-on-surface: #edf5f3;
  --ui-on-surface-muted: #b6c8c5;
  --ui-border: #33413f;
  --ui-border-strong: #526562;
  --ui-focus: #7fd7cc;
  --ui-disabled-surface: #1d2726;
  --ui-disabled-border: #33413f;
  --ui-on-disabled: #8b9b98;
}

/* ============================================================
   4. emerald — growth and finance
   ============================================================ */

[data-ui-theme="emerald"] {
  --ui-brand: #047857;
  --ui-brand-hover: #036a4d;
  --ui-brand-active: #025c42;
  --ui-brand-soft: #e4f6ee;
  --ui-on-brand: #ffffff;
  --ui-secondary: #4b5b52;
  --ui-secondary-hover: #3e4b44;
  --ui-secondary-active: #34403a;
  --ui-secondary-soft: #eef2f0;
  --ui-canvas: #f4f9f6;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #ecf5f0;
  --ui-ink: #16211b;
  --ui-ink-soft: #53665c;
  --ui-on-surface: #16211b;
  --ui-on-surface-muted: #53665c;
  --ui-border: #d2e3d9;
  --ui-border-strong: #a4c1b1;
  --ui-focus: #047857;
  --ui-disabled-surface: #e8f0ec;
  --ui-disabled-border: #d2e3d9;
  --ui-on-disabled: #6d8077;
}

[data-ui-theme="emerald"][data-ui-mode="dark"] {
  --ui-brand: #4fc08d;
  --ui-brand-hover: #6ed0a6;
  --ui-brand-active: #8ddcbb;
  --ui-brand-soft: #14301f;
  --ui-on-brand: #0d1512;
  --ui-secondary: #aabcb3;
  --ui-secondary-hover: #bdcbc4;
  --ui-secondary-active: #cfd9d3;
  --ui-secondary-soft: #1f2b25;
  --ui-canvas: #101713;
  --ui-surface: #17211c;
  --ui-surface-subtle: #1f2b25;
  --ui-ink: #eef6f1;
  --ui-ink-soft: #b7c9bf;
  --ui-on-surface: #eef6f1;
  --ui-on-surface-muted: #b7c9bf;
  --ui-border: #33413a;
  --ui-border-strong: #52655b;
  --ui-focus: #7bd7ae;
  --ui-disabled-surface: #1d2721;
  --ui-disabled-border: #33413a;
  --ui-on-disabled: #8c9b93;
}

/* ============================================================
   5. amber — warm, marketing and reporting
   ============================================================ */

[data-ui-theme="amber"] {
  --ui-brand: #b45309;
  --ui-brand-hover: #9c4807;
  --ui-brand-active: #853c06;
  --ui-brand-soft: #fdf0e2;
  --ui-on-brand: #ffffff;
  --ui-secondary: #5d5343;
  --ui-secondary-hover: #4c4437;
  --ui-secondary-active: #3f382e;
  --ui-secondary-soft: #f4f1ec;
  --ui-canvas: #faf7f3;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f6f0e9;
  --ui-ink: #241d14;
  --ui-ink-soft: #665a49;
  --ui-on-surface: #241d14;
  --ui-on-surface-muted: #665a49;
  --ui-border: #e4d9ca;
  --ui-border-strong: #c0ae97;
  --ui-focus: #b45309;
  --ui-disabled-surface: #f1ece5;
  --ui-disabled-border: #e4d9ca;
  --ui-on-disabled: #83755f;
}

[data-ui-theme="amber"][data-ui-mode="dark"] {
  --ui-brand: #f0a64a;
  --ui-brand-hover: #f4b56b;
  --ui-brand-active: #f7c68d;
  --ui-brand-soft: #3a2a12;
  --ui-on-brand: #1a1309;
  --ui-secondary: #c3b49c;
  --ui-secondary-hover: #d0c4b0;
  --ui-secondary-active: #ddd4c4;
  --ui-secondary-soft: #2b231b;
  --ui-canvas: #191410;
  --ui-surface: #221b15;
  --ui-surface-subtle: #2b231b;
  --ui-ink: #f8f2e9;
  --ui-ink-soft: #cdbda6;
  --ui-on-surface: #f8f2e9;
  --ui-on-surface-muted: #cdbda6;
  --ui-border: #463a2c;
  --ui-border-strong: #6a5844;
  --ui-focus: #f5b96f;
  --ui-disabled-surface: #292219;
  --ui-disabled-border: #463a2c;
  --ui-on-disabled: #9a8b76;
}

/* ============================================================
   6. rose — alerts, revenue and client-facing dashboards
   ============================================================ */

[data-ui-theme="rose"] {
  --ui-brand: #be123c;
  --ui-brand-hover: #a60f34;
  --ui-brand-active: #8e0d2d;
  --ui-brand-soft: #fdeaf0;
  --ui-on-brand: #ffffff;
  --ui-secondary: #5c4a50;
  --ui-secondary-hover: #4b3c41;
  --ui-secondary-active: #3f3236;
  --ui-secondary-soft: #f4eef0;
  --ui-canvas: #fbf5f7;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f7eef1;
  --ui-ink: #231a1d;
  --ui-ink-soft: #65545a;
  --ui-on-surface: #231a1d;
  --ui-on-surface-muted: #65545a;
  --ui-border: #e6d3d9;
  --ui-border-strong: #c3a3ac;
  --ui-focus: #be123c;
  --ui-disabled-surface: #f3eaed;
  --ui-disabled-border: #e6d3d9;
  --ui-on-disabled: #86707a;
}

[data-ui-theme="rose"][data-ui-mode="dark"] {
  --ui-brand: #f2688c;
  --ui-brand-hover: #f586a3;
  --ui-brand-active: #f8a4bb;
  --ui-brand-soft: #3d1522;
  --ui-on-brand: #1a0f13;
  --ui-secondary: #c9b1b8;
  --ui-secondary-hover: #d6c2c8;
  --ui-secondary-active: #e2d3d7;
  --ui-secondary-soft: #2c2024;
  --ui-canvas: #1a1114;
  --ui-surface: #23181c;
  --ui-surface-subtle: #2c2024;
  --ui-ink: #f9eff2;
  --ui-ink-soft: #ceb8bf;
  --ui-on-surface: #f9eff2;
  --ui-on-surface-muted: #ceb8bf;
  --ui-border: #48333a;
  --ui-border-strong: #6b4c55;
  --ui-focus: #f58aa6;
  --ui-disabled-surface: #2a1e22;
  --ui-disabled-border: #48333a;
  --ui-on-disabled: #9d868e;
}

/* ============================================================
   7. magenta — creative and campaign surfaces
   ============================================================ */

[data-ui-theme="magenta"] {
  --ui-brand: #a21caf;
  --ui-brand-hover: #8c1899;
  --ui-brand-active: #771383;
  --ui-brand-soft: #fbe9fd;
  --ui-on-brand: #ffffff;
  --ui-secondary: #5a4a5d;
  --ui-secondary-hover: #4a3c4c;
  --ui-secondary-active: #3d323f;
  --ui-secondary-soft: #f2eef3;
  --ui-canvas: #faf5fb;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f5eef7;
  --ui-ink: #221a23;
  --ui-ink-soft: #625266;
  --ui-on-surface: #221a23;
  --ui-on-surface-muted: #625266;
  --ui-border: #e3d3e6;
  --ui-border-strong: #bda4c1;
  --ui-focus: #a21caf;
  --ui-disabled-surface: #f1eaf3;
  --ui-disabled-border: #e3d3e6;
  --ui-on-disabled: #837086;
}

[data-ui-theme="magenta"][data-ui-mode="dark"] {
  --ui-brand: #e070ee;
  --ui-brand-hover: #e88ff3;
  --ui-brand-active: #f0adf7;
  --ui-brand-soft: #38143d;
  --ui-on-brand: #160d17;
  --ui-secondary: #c5b3c8;
  --ui-secondary-hover: #d3c4d5;
  --ui-secondary-active: #e0d4e2;
  --ui-secondary-soft: #2a1e2c;
  --ui-canvas: #180f19;
  --ui-surface: #211623;
  --ui-surface-subtle: #2a1e2c;
  --ui-ink: #f7eef8;
  --ui-ink-soft: #cbb8cd;
  --ui-on-surface: #f7eef8;
  --ui-on-surface-muted: #cbb8cd;
  --ui-border: #453348;
  --ui-border-strong: #684c6c;
  --ui-focus: #e794f2;
  --ui-disabled-surface: #281c2a;
  --ui-disabled-border: #453348;
  --ui-on-disabled: #9a879d;
}

/* ============================================================
   8. graphite — neutral, dense back-office work
   ============================================================ */

[data-ui-theme="graphite"] {
  --ui-brand: #334155;
  --ui-brand-hover: #2b3646;
  --ui-brand-active: #232c39;
  --ui-brand-soft: #eaedf1;
  --ui-on-brand: #ffffff;
  --ui-secondary: #5a6472;
  --ui-secondary-hover: #4b5461;
  --ui-secondary-active: #3f4753;
  --ui-secondary-soft: #eef0f3;
  --ui-canvas: #f5f6f8;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #eef0f4;
  --ui-ink: #1b2029;
  --ui-ink-soft: #59616e;
  --ui-on-surface: #1b2029;
  --ui-on-surface-muted: #59616e;
  --ui-border: #d8dce3;
  --ui-border-strong: #aab2bf;
  --ui-focus: #334155;
  --ui-disabled-surface: #ebeef2;
  --ui-disabled-border: #d8dce3;
  --ui-on-disabled: #767e8b;
}

[data-ui-theme="graphite"][data-ui-mode="dark"] {
  --ui-brand: #93a6c4;
  --ui-brand-hover: #a9b9d1;
  --ui-brand-active: #bfcade;
  --ui-brand-soft: #222a36;
  --ui-on-brand: #11151b;
  --ui-secondary: #b4bcc7;
  --ui-secondary-hover: #c4cbd4;
  --ui-secondary-active: #d4d9e0;
  --ui-secondary-soft: #232932;
  --ui-canvas: #12151a;
  --ui-surface: #1a1f26;
  --ui-surface-subtle: #232932;
  --ui-ink: #eef1f5;
  --ui-ink-soft: #b8c0cb;
  --ui-on-surface: #eef1f5;
  --ui-on-surface-muted: #b8c0cb;
  --ui-border: #38404c;
  --ui-border-strong: #57616f;
  --ui-focus: #a3b4cf;
  --ui-disabled-surface: #232932;
  --ui-disabled-border: #38404c;
  --ui-on-disabled: #8d95a1;
}