/* ======================================================================
   Дизайн-токены единого приложения «Помощник».
   Визуальный язык — «конспект»: бумага в клетку, чернильные рамки,
   жёлтый маркер, синее перо (тетрадный стиль шпаргалки).
   ====================================================================== */
:root {
  color-scheme: light dark;

  /* поверхности и текст */
  --bg: #F7F8F3;                /* бумага */
  --bg2: #FFFFFF;               /* карточка */
  --bg3: #EFF1EA;               /* мягкая заливка */
  --text: #1C2A38;              /* чернила */
  --text2: #66727E;             /* приглушённый */
  --text3: #96A0AA;             /* подписи */
  --border: #DDE2DA;            /* тонкая линия */
  --border2: #C6CDC2;           /* линия построже (поля ввода) */
  --ink: #1C2A38;               /* жирная чернильная рамка */

  /* фирменные цвета конспекта */
  --marker: #FFDE3D;            /* жёлтый маркер — главные действия */
  --marker-soft: #FFF3B0;
  --pen: #2456A6;               /* синее перо — акценты, ссылки, метки */
  --code-bg: #1C2A38;
  --code-fg: #E8EDF2;
  --grid-line: rgba(36, 86, 166, 0.055);
  --head-bg: rgba(247, 248, 243, 0.97);
  --head-bg-strong: rgba(247, 248, 243, 0.98);

  /* акцентная палитра карточек конструктора */
  --purple: #534AB7; --purple-l: #EEEDFE; --purple-d: #26215C;
  --blue: #2456A6;   --blue-l: #E7EDF8;   --blue-d: #16376B;
  --green: #3B6D11;  --green-l: #EAF3DE;  --green-d: #27500A;
  --amber: #BA7517;  --amber-l: #FAEEDA;  --amber-d: #412402;
  --teal: #0F6E56;   --teal-l: #E1F5EE;   --teal-d: #04342C;
  --coral: #993C1D;  --coral-l: #FAECE7;  --coral-d: #4A1B0C;
  --red: #C9403C;    --red-l: #F9E7E6;    --red-d: #7C2422;
  --pink: #993556;   --pink-l: #FBEAF0;   --pink-d: #4B1528;

  /* семантика */
  --accent: var(--pen);
  --accent-l: #E7EDF8;
  --accent-d: #16376B;
  --danger: var(--red);
  --gen: var(--pen);            /* действия ИИ-генерации */
  --rec: #C9403C;               /* индикация записи */

  /* фирменная офсетная тень «конспекта» */
  --shadow-ink: 3px 3px 0 rgba(28, 42, 56, 0.08);
  --shadow-ink-lg: 4px 4px 0 rgba(28, 42, 56, 0.10);

  /* геометрия */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --tap: 44px;

  /* безопасные зоны */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* оболочка */
  --shell-base-h: 50px;
  --shell-h: calc(var(--shell-base-h) + var(--safe-top));

  /* слои */
  --z-module-head: 90;
  --z-shell: 100;
  --z-overlay: 200;
  --z-drawer: 220;
  --z-sheet: 210;
  --z-gen: 250;
  --z-toast: 300;

  /* типографика */
  /* Self-contained system stack: no visitor request is sent to a font CDN. */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --display: var(--font);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101923;
    --bg2: #172332;
    --bg3: #202E3D;
    --text: #EEF3F7;
    --text2: #B7C3CE;
    --text3: #82919F;
    --border: #334556;
    --border2: #4A5E70;
    --ink: #E8EDF2;

    --marker: #D8B83A;
    --marker-soft: rgba(216, 184, 58, 0.22);
    --pen: #8FB4FF;
    --code-bg: #07111C;
    --code-fg: #EEF3F7;
    --grid-line: rgba(143, 180, 255, 0.06);
    --head-bg: rgba(16, 25, 35, 0.94);
    --head-bg-strong: rgba(16, 25, 35, 0.98);

    --purple: #A8A0FF; --purple-l: rgba(168, 160, 255, 0.18); --purple-d: #D6D2FF;
    --blue: #8FB4FF;   --blue-l: rgba(143, 180, 255, 0.16);   --blue-d: #C9DAFF;
    --green: #9FD47A;  --green-l: rgba(159, 212, 122, 0.16);  --green-d: #D8F2C6;
    --amber: #E7B86A;  --amber-l: rgba(231, 184, 106, 0.17);  --amber-d: #FFE2A8;
    --teal: #74D6BD;   --teal-l: rgba(116, 214, 189, 0.16);   --teal-d: #BDF3E5;
    --coral: #E59677;  --coral-l: rgba(229, 150, 119, 0.17);  --coral-d: #FFD0BE;
    --red: #F07872;    --red-l: rgba(240, 120, 114, 0.16);    --red-d: #FFC5C2;
    --pink: #E887AA;   --pink-l: rgba(232, 135, 170, 0.16);   --pink-d: #FFC9DC;

    --accent: var(--pen);
    --accent-l: rgba(143, 180, 255, 0.16);
    --accent-d: #C9DAFF;
    --danger: var(--red);
    --gen: var(--pen);
    --rec: #F07872;

    --shadow-ink: 3px 3px 0 rgba(0, 0, 0, 0.26);
    --shadow-ink-lg: 4px 4px 0 rgba(0, 0, 0, 0.34);
  }
}