/*
 * Identitet: Icons Of-produkt.
 * För våra egna appar: The Cards, kommundataappen och de som kommer.
 * Utgår från The Cards nya design (ICONSOF-CSRD-Front-End, develop, 2026-10-05).
 * Värdena och skälen står i manual/4-standard.md.
 *
 * Typsnitt laddas separat: css/typsnitt/icons-of-produkt.css, eller av appen själv.
 */

:root,
.light,
[data-theme="light"] {
  /* Ytor och text */
  --dm-bg: #f5f4f0;
  --dm-surface: #ffffff;
  --dm-surface-raised: #ffffff;
  --dm-subtle: #efeee9;
  --dm-fg: #17191c;
  --dm-fg-muted: #5c5f65;
  --dm-fg-faint: #8a8d93;
  --dm-border: #e3e1db;
  --dm-border-input: #8f8c84;
  --dm-border-strong: #17191c;

  /* Handling */
  --dm-primary: #00823c;
  --dm-primary-hover: #006e33;
  --dm-primary-pressed: #005a2a;
  --dm-primary-fg: #ffffff;
  --dm-link: #006e33;
  --dm-focus: #00823c;
  --dm-selected: #eef7f1;
  --dm-selected-rail: #00823c;

  /* Agenten */
  --dm-agent: #4f46e5;
  --dm-agent-surface: #f1f0fd;
  --dm-agent-border: #c1bef6;
  --dm-agent-fg: #ffffff;

  /* Status. Färgen bärs av ikon och kant, texten är --dm-fg */
  --dm-success: #2f7a4b;
  --dm-success-surface: #f1f8f3;
  --dm-success-border: #c3e1ca;
  --dm-success-text: #106034;
  --dm-success-fg: #ffffff;
  --dm-warning: #945100;
  --dm-warning-surface: #fef9f5;
  --dm-warning-border: #f6dfc7;
  --dm-warning-text: #945100;
  --dm-warning-fg: #ffffff;
  --dm-critical: #c42b1c;
  --dm-critical-surface: #fff3f0;
  --dm-critical-border: #ffc8bc;
  --dm-critical-text: #a30000;
  --dm-critical-fg: #ffffff;
  --dm-info: #2e6db4;
  --dm-info-surface: #f1f7ff;
  --dm-info-border: #c2dcfc;
  --dm-info-text: #105296;
  --dm-info-fg: #ffffff;

  --dm-overlay: rgba(23, 25, 28, 0.4);

  /* Appskal. Ljust, som The Cards sidopanel */
  --dm-shell-bg: #fbfbf9;
  --dm-shell-fg: #17191c;
  --dm-shell-muted: #5c5f65;
  --dm-shell-hover: #efeee9;
  --dm-shell-rail: #00823c;

  /* Diagramflöde */
  --dm-chart-1: #4a4f57;
  --dm-chart-2: #00823c;
  --dm-chart-3: #8a8d93;
  --dm-chart-4: #b6b3ab;
  --dm-chart-5: #7cc79c;
  --dm-chart-6: #2f4466;
  --dm-chart-7: #bf4f2a;
  --dm-chart-8: #8f6512;

  /* Typsnitt och vikter */
  --dm-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dm-font-mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --dm-weight-regular: 400;
  --dm-weight-strong: 600;
  --dm-weight-number: 500;

  /* Radier. Tre värden: 8, 14 och helt runt */
  --dm-radius-control: 8px;
  --dm-radius-field: 8px;
  --dm-radius-tag: 9999px;
  --dm-radius-surface: 14px;
  --dm-radius-overlay: 8px;

  /* Skugga bara på det som svävar */
  --dm-shadow-raised: 0 1px 2px rgba(23, 25, 28, 0.06), 0 0 0 1px rgba(23, 25, 28, 0.06);
  --dm-shadow-overlay: 0 8px 24px rgba(23, 25, 28, 0.14), 0 0 0 1px rgba(23, 25, 28, 0.06);
}

.dark,
[data-theme="dark"] {
  --dm-bg: #0b0c0e;
  --dm-surface: #131518;
  --dm-surface-raised: #1b1d21;
  --dm-subtle: #1e2022;
  --dm-fg: #eeece8;
  --dm-fg-muted: #9b9fa7;
  --dm-fg-faint: #6f737b;
  --dm-border: #23262b;
  --dm-border-input: #5f646c;
  --dm-border-strong: #eeece8;

  --dm-primary: #3ecf85;
  --dm-primary-hover: #64dba0;
  --dm-primary-pressed: #8be6b9;
  --dm-primary-fg: #06140c;
  --dm-link: #3ecf85;
  --dm-focus: #3ecf85;
  --dm-selected: #1e2226;
  --dm-selected-rail: #3ecf85;

  --dm-agent: #8f8af2;
  --dm-agent-surface: #1d1c33;
  --dm-agent-border: #3d3a7a;
  --dm-agent-fg: #0b0c0e;

  --dm-success: #76b187;
  --dm-success-surface: #181b1f;
  --dm-success-border: #24432f;
  --dm-success-text: #9dcba9;
  --dm-success-fg: #0b0c0e;
  --dm-warning: #dca771;
  --dm-warning-surface: #181b1f;
  --dm-warning-border: #4f3d24;
  --dm-warning-text: #ecc49d;
  --dm-warning-fg: #0b0c0e;
  --dm-critical: #f2735f;
  --dm-critical-surface: #181b1f;
  --dm-critical-border: #5b2a25;
  --dm-critical-text: #ffa292;
  --dm-critical-fg: #0b0c0e;
  --dm-info: #73a6e4;
  --dm-info-surface: #181b1f;
  --dm-info-border: #263c5a;
  --dm-info-text: #9bc3f3;
  --dm-info-fg: #0b0c0e;

  --dm-overlay: rgba(0, 0, 0, 0.6);

  --dm-shell-bg: #101114;
  --dm-shell-fg: #eeece8;
  --dm-shell-muted: #9b9fa7;
  --dm-shell-hover: #1e2022;
  --dm-shell-rail: #3ecf85;

  --dm-chart-1: #c9ccd1;
  --dm-chart-2: #3ecf85;
  --dm-chart-3: #8a8d93;
  --dm-chart-4: #5c5f65;
  --dm-chart-5: #1f6b45;
  --dm-chart-6: #7f9cc9;
  --dm-chart-7: #e07a55;
  --dm-chart-8: #d0a54a;

  --dm-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --dm-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}