/* Blisk Workspace - дизайн-токени. Єдине джерело кольорів, радіусів, тіней і відступів для всіх модулів.
   Тема: за системою (prefers-color-scheme) або примусово через <html data-theme="light|dark">. */

:root {
  color-scheme: light;

  /* поверхні */
  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #f0f2f9;
  --surface-3: #e7eaf4;
  --overlay: rgba(14, 17, 32, .55);

  /* лінії */
  --border: #e2e5f0;
  --border-strong: #ccd1e3;

  /* текст */
  --text: #12152a;
  --text-2: #4b5170;
  --muted: #7b819d;
  --faint: #a2a8c0;

  /* акцент */
  --primary: #5459e8;
  --primary-hover: #4347d6;
  --primary-soft: #eceeff;
  --primary-line: #c9ccff;
  --primary-text: #3a3ec4;
  --on-primary: #ffffff;

  /* семантика */
  --success: #138a4b;  --success-soft: #e5f6ec;  --success-line: #b7e3c8;
  --warning: #b36200;  --warning-soft: #fff3dc;  --warning-line: #f3d9a0;
  --danger:  #d12c48;  --danger-soft:  #fdecef;  --danger-line:  #f5bcc6;
  --info:    #0a74c9;  --info-soft:    #e4f1fc;  --info-line:    #b5d8f3;
  --violet:  #7a45d6;  --violet-soft:  #f1e9fd;  --violet-line:  #d8c4f6;

  /* форма */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 11px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 24, 56, .06);
  --shadow-sm: 0 1px 3px rgba(20, 24, 56, .07), 0 1px 2px rgba(20, 24, 56, .04);
  --shadow:    0 4px 14px rgba(20, 24, 56, .08), 0 1px 3px rgba(20, 24, 56, .05);
  --shadow-lg: 0 18px 50px rgba(20, 24, 56, .22);
  --ring: 0 0 0 3px rgba(84, 89, 232, .26);

  /* типографіка */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* розкладка оболонки */
  --sidebar-w: 256px;
  --topbar-h: 58px;

  /* рух */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .12s;
  --t: .2s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --dark: 1; }
}
:root[data-theme="dark"] { color-scheme: dark; --dark: 1; }

/* Темні значення задано двічі (для авто- та ручного режиму) - без препроцесора інакше не вийде. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0f19;
    --surface: #151826;
    --surface-2: #1b1f31;
    --surface-3: #242941;
    --overlay: rgba(4, 6, 14, .66);
    --border: #262b42;
    --border-strong: #353b5a;
    --text: #eceffb;
    --text-2: #b6bcd8;
    --muted: #868daf;
    --faint: #5d6485;
    --primary: #7c80fb;
    --primary-hover: #9498ff;
    --primary-soft: #22254c;
    --primary-line: #3b4087;
    --primary-text: #b3b6ff;
    --on-primary: #0d0f19;
    --success: #4cd68a;  --success-soft: #11291e;  --success-line: #1f5a3b;
    --warning: #f5b84d;  --warning-soft: #2f2410;  --warning-line: #6a4d19;
    --danger:  #ff7d94;  --danger-soft:  #351821;  --danger-line:  #75303f;
    --info:    #62b6f5;  --info-soft:    #10273a;  --info-line:    #25557d;
    --violet:  #b894f5;  --violet-soft:  #281d44;  --violet-line:  #54408a;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow:    0 6px 18px rgba(0, 0, 0, .4);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, .6);
    --ring: 0 0 0 3px rgba(124, 128, 251, .34);
  }
}
:root[data-theme="dark"] {
  --bg: #0d0f19;
  --surface: #151826;
  --surface-2: #1b1f31;
  --surface-3: #242941;
  --overlay: rgba(4, 6, 14, .66);
  --border: #262b42;
  --border-strong: #353b5a;
  --text: #eceffb;
  --text-2: #b6bcd8;
  --muted: #868daf;
  --faint: #5d6485;
  --primary: #7c80fb;
  --primary-hover: #9498ff;
  --primary-soft: #22254c;
  --primary-line: #3b4087;
  --primary-text: #b3b6ff;
  --on-primary: #0d0f19;
  --success: #4cd68a;  --success-soft: #11291e;  --success-line: #1f5a3b;
  --warning: #f5b84d;  --warning-soft: #2f2410;  --warning-line: #6a4d19;
  --danger:  #ff7d94;  --danger-soft:  #351821;  --danger-line:  #75303f;
  --info:    #62b6f5;  --info-soft:    #10273a;  --info-line:    #25557d;
  --violet:  #b894f5;  --violet-soft:  #281d44;  --violet-line:  #54408a;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow:    0 6px 18px rgba(0, 0, 0, .4);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .6);
  --ring: 0 0 0 3px rgba(124, 128, 251, .34);
}