/* ============================================================
   Норма — дизайн-система (спільні токени)
   Основна палітра «Бузок»: #222327 #0D3837 #00856E #FDB4E5 #D745A8
   ============================================================ */

@import url('fonts-embedded.css');

:root {
  /* --- бренд-палітра «Бузок» (бірюза + рожево-магента) --- */
  --c-blue-900: #0D3837;   /* глибока бірюза (дії / текст-бренд) */
  --c-blue-700: #00856E;   /* бірюза (кнопки, лінки, активне) */
  --c-blue-950: #082322;
  --c-blue-400: #4fa996;   /* м'яка бірюза (hover-бордюр) */
  --c-blue-200: #bfe2db;   /* блідо-бірюзовий бордюр */
  --c-blue-100: #d8efea;   /* фон чипів */
  --c-blue-50:  #eef7f5;   /* hover-фон рядків */

  --c-lime:     #D745A8;   /* рожево-магента акцент */
  --c-lime-600: #b02d86;   /* темніша магента (текст іконок) */
  --c-lime-100: #fbe1f1;   /* блідо-рожевий фон */

  --c-green-900: #0D3837;  /* темна поверхня / навігація */
  --c-green-800: #0f4a48;
  --c-mint:      #FDB4E5;  /* рожевий (акцент на темному) */
  --c-mint-bg:   #d9efea;

  /* --- нейтралі (від #222327, прохолодний підтон) --- */
  --ink:    #222327;
  --ink-2:  #43454c;
  --muted:  #6c6f78;
  --muted-2:#9da0a8;
  --line:   #e6e7ea;
  --line-2: #f0f1f3;
  --bg:     #f5f6f8;
  --surface:#ffffff;
  --surface-85: rgba(255,255,255,.85);
  --surface-2:#eef0f2;
  --shadow-card: 0 8px 24px rgba(13,56,55,.07);
  --shadow-pop: 0 10px 30px rgba(13,56,55,.10);

  /* статуси */
  --ok:     #00856E;
  --ok-bg:  #daf0eb;
  --warn:   #FCCF46;
  --warn-ink:#8a6300;
  --warn-bg:#fdf4d6;
  --info:   var(--c-blue-700);

  --font: 'Ysabeau Office', 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================
   ТЕМНА ТЕМА — бузкова ніч (бірюза + рожево-магента)
   ============================================================ */
[data-theme="dark"] {
  --c-blue-900: #0c9e84;   /* основна дія (яскравіша бірюза на темному) */
  --c-blue-700: #2bbfa4;   /* лінки / акценти */
  --c-blue-950: #0a7a67;
  --c-blue-400: #2a4a47;   /* hover-бордюр */
  --c-blue-200: #2c4a47;   /* бордюри акценту */
  --c-blue-100: #14302d;   /* фон чипів */
  --c-blue-50:  #122522;   /* hover-фон рядків */

  --c-lime:     #ec6fc0;   /* рожево-магента акцент */
  --c-lime-600: #f29ad4;
  --c-lime-100: #2a1426;

  --c-green-900: #0a1413;
  --c-green-800: #0f201e;
  --c-mint:      #FDB4E5;
  --c-mint-bg:   #14302d;   /* фон плиток модулів */

  --ink:    #e9ecee;
  --ink-2:  #c2c6cc;
  --muted:  #8b8f98;
  --muted-2:#696d76;
  --line:   #2a2d33;
  --line-2: #21242a;
  --bg:     #101316;
  --surface:#181b1f;
  --surface-85: rgba(24,27,31,.85);
  --surface-2:#1d2125;
  --shadow-card: 0 8px 24px rgba(0,0,0,.4);
  --shadow-pop: 0 12px 34px rgba(0,0,0,.5);

  --ok:     #2bbf9f;
  --ok-bg:  #11302a;
  --warn:   #FCCF46;
  --warn-ink:#FCCF46;
  --warn-bg:#2a2110;
}
[data-theme="dark"] .cc3 { background:#33201f; color:#ef9a90; }

* { box-sizing: border-box; }

.screen {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
.screen *, .screen *::before, .screen *::after { box-sizing: border-box; }

/* tabular numerals helper */
.tnum { font-variant-numeric: tabular-nums; }
.screen .mono { font-family: var(--mono); }
.mono { font-family: var(--mono); }

/* form controls must inherit the design font (else they fall back to system-ui) */
body { font-family: var(--font); }
input, select, textarea, button, optgroup { font-family: inherit; }

/* generic scrollbar hush inside artboards */
.screen ::-webkit-scrollbar { width: 8px; height: 8px; }
.screen ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }