/*
 * Designgrund för Asta.AI.
 *
 * En fil, fyra gränssnitt. Kundens chatt, kundens samtal, agentarbetsytan och
 * arbetsbänken delar samma värden — annars glider de isär, och att de ser ut att
 * höra ihop är halva intrycket av att de gör det.
 *
 * Ljust läge gäller alltid. Tidigare följde vyerna systemets inställning, vilket
 * gjorde att samma skärmdump såg olika ut hos två personer i samma rum. Mörkt
 * läge finns kvar bakom ett uttalat `data-theme="dark"` men är inget vi väljer
 * åt någon.
 */
:root {
  /* Ytor: fyra steg räcker. Fler steg blir gråskalor ingen kan skilja på. */
  --bg: #f6f7fa;
  --surface: #ffffff;
  --surface-2: #f2f4f8;
  --surface-3: #e9edf4;

  --border: #e3e7ee;
  --border-strong: #cdd4e0;

  --text: #121822;
  --text-2: #3c4757;
  --muted: #6b7687;

  /* En accent. Allt som är blått går att klicka på. */
  --accent: #2457d6;
  --accent-hover: #1c46b0;
  --accent-soft: #eaf0fe;
  --accent-text: #ffffff;

  --ok: #0f7a4a;
  --ok-bg: #e7f5ed;
  --warn: #8a5a00;
  --warn-bg: #fdf3e1;
  --err: #b3261e;
  --err-bg: #fdecec;

  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;

  /* Skuggor i stället för tjocka ramar. Det som ligger ovanpå ska kännas så. */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 6px 16px -4px rgba(16, 24, 40, 0.1);
  --shadow-3: 0 16px 40px -12px rgba(16, 24, 40, 0.22);

  /* Fokus ska synas. En tangentbordsanvändare ska aldrig undra var hen är. */
  --ring: 0 0 0 3px rgba(36, 87, 214, 0.22);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --header-h: 56px;
}

:root[data-theme='dark'] {
  --bg: #0f1216;
  --surface: #171b21;
  --surface-2: #1f242c;
  --surface-3: #262d36;
  --border: #2b323b;
  --border-strong: #3a434f;
  --text: #e7ebf0;
  --text-2: #c2cad4;
  --muted: #98a3b2;
  --accent: #5b91f5;
  --accent-hover: #7aa6f7;
  --accent-soft: #17233a;
  --accent-text: #0f1216;
  --ok: #6ede9e;
  --ok-bg: #16301f;
  --warn: #e5bd6a;
  --warn-bg: #2c2410;
  --err: #f0928f;
  --err-bg: #331617;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}

/* Siffror som ska jämföras ska stå i kolumn. */
.tabular {
  font-variant-numeric: tabular-nums;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
}