/*
 * MOK Zapad design tokens. Values mirror the design concept 1:1.
 * Loaded before mok.css and embed.css.
 */

:root {
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #dbeafe;
  --canvas: #e8eef7;
  --canvas-2: #f4f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --hover: #f1f5f9;
  --danger: #dc2626;
  --warn-bg: #fef3c7;
  --warn-text: #92400e;
  --radius: 16px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow: 0 16px 40px -20px rgb(15 23 42 / 0.28);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --nav-width: 248px;
  --list-width: 400px;
  --gap: 10px;

  /* masks for markup generated by the Roundcube core, where we cannot inject <svg> */
  --m-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m21.4 11.6-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7L9.5 18a2 2 0 0 1-2.8-2.8l8.2-8.2'/%3E%3C/svg%3E");
  --m-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
  --m-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  --m-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --m-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --m-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.5 8v5L10.5 20v-7z'/%3E%3C/svg%3E");
  --m-chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --m-chev-down-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html.dark,
html.dark-mode {
  --canvas: #0b1220;
  --canvas-2: #1e293b;
  --surface: #111827;
  --text: #f8fafc;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --line: #1f2a3d;
  --hover: #1e293b;
  --accent-soft: #1e3a8a;
  --warn-bg: #422006;
  --warn-text: #fcd34d;
  --shadow: 0 16px 40px -20px rgb(0 0 0 / 0.55);
}