/* Dreams – единые токены бренда. Источник правды: брендбук brand.godreams.io и тёмная тема
   дашборда, они совпадают дословно. Разбор и правила – company/brand/design-tokens.md.

   Как пользоваться: скопировать файл в проект и подключить первым, до своих стилей.
   Дисциплина одна: в коде компонентов не должно остаться ни одного шестнадцатеричного значения.

   Темы задаются трижды – светлая на :root, тёмная в prefers-color-scheme под
   :root:not([data-theme="light"]) и она же на :root[data-theme="dark"], чтобы кнопка
   перебивала систему в обе стороны. Значения в двух тёмных блоках совпадают дословно. */

:root {
  /* бренд */
  --violet: #7a4fee;
  --violet-2: #6b3fe0;

  /* градиенты брендбука – неизменны в обеих темах */
  --g-primary: linear-gradient(110deg, #5b8cff 0%, #8a63ff 45%, #b14bff 75%, #e27bff 100%);
  --g-brand: linear-gradient(135deg, #42a5fb, #da5fe7);
  --g-violet: linear-gradient(135deg, #b17cff, #6b3bff);
  --g-blue: linear-gradient(135deg, #4da3ff, #0e3fb0);
  --g-amber: linear-gradient(135deg, #ffc371, #ff6a3d);

  /* Тона направлений – 19 различимых оттенков. Кто каким пользуется – design-tokens.md.
     Градиент --t-* красит плитку и значок, плоский --s-* – текст и границы. */
  --t-violet: linear-gradient(135deg, #b17cff, #6b3bff);
  --t-blue: linear-gradient(135deg, #4da3ff, #0e3fb0);
  --t-amber: linear-gradient(135deg, #ffc371, #ff6a3d);
  --t-teal: linear-gradient(135deg, #5ad1d1, #2a8f9a);
  --t-rose: linear-gradient(135deg, #ff9ac1, #c2185b);
  --t-lime: linear-gradient(135deg, #b6e36b, #4c9a2a);
  --t-green: linear-gradient(135deg, #6ee7a8, #0f8a5f);
  --t-pink: linear-gradient(135deg, #e27bff, #b14bff);
  --t-cyan: linear-gradient(135deg, #7fd8ff, #1b7fb8);
  --t-indigo: linear-gradient(135deg, #8a9bff, #3b3baf);
  --t-orchid: linear-gradient(135deg, #f0a6ff, #9b2fc9);
  --t-sky: linear-gradient(135deg, #8fe3ff, #0e86c9);
  --t-coral: linear-gradient(135deg, #ffb199, #e0552b);
  --t-slate: linear-gradient(135deg, #b6bcd1, #5a6480);
  --t-red: linear-gradient(135deg, #ff8a8a, #c81e1e);
  --t-orange: linear-gradient(135deg, #ffc46b, #e8730c);
  --t-yellow: linear-gradient(135deg, #ffe07d, #d9a400);
  --t-purple: linear-gradient(135deg, #d8a6ff, #6d28d9);
  --t-obsidian: linear-gradient(135deg, #8c8c9e, #1b1b24);

  --s-violet: #7a4fee;
  --s-blue: #2f6ad9;
  --s-teal: #2a8f9a;
  --s-cyan: #1b7fb8;
  --s-sky: #0e86c9;
  --s-indigo: #4b4bc4;
  --s-green: #0f8a5f;
  --s-lime: #5c9c1f;
  --s-amber: #b06a12;
  --s-coral: #d2552b;
  --s-rose: #c2185b;
  --s-pink: #b14bff;
  --s-orchid: #9b2fc9;
  --s-slate: #6b7490;
  --s-red: #c81e1e;
  --s-orange: #c65a00;
  --s-yellow: #9a7500;
  --s-purple: #6d28d9;
  --s-obsidian: #2f2f3d;

  /* нейтрали брендбука – опорная шкала, интерфейс берёт токены ниже */
  --dreams-ink: #ffffff;
  --dreams-fog: #e3e3e8;
  --dreams-ash: #7a7a85;
  --dreams-iron: #3a3a45;
  --dreams-obsidian: #14141d;

  /* шрифт */
  --ff: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --measure: 80ch;

  /* поверхности и линии */
  --bg: #f4f3fa;
  --page-glow:
    radial-gradient(900px 600px at 80% -10%, rgba(138, 99, 255, 0.14), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(91, 140, 255, 0.12), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(177, 75, 255, 0.1), transparent 60%), #f4f3fa;
  --card: #ffffff;
  --card-2: #fbfaff;
  --thead-bg: #f1eefb;
  --input-bg: #ffffff;
  --row-hover: rgba(24, 18, 48, 0.035);
  --hover-tint: rgba(24, 18, 48, 0.05);
  --line: rgba(24, 18, 48, 0.11);
  --line-strong: rgba(24, 18, 48, 0.2);
  --shadow: 0 18px 50px rgba(24, 18, 48, 0.12);
  --scrim: rgba(24, 18, 48, 0.42);

  /* текст */
  --ink: #171327;
  --ink-2: rgba(23, 19, 39, 0.76);
  --ink-3: rgba(23, 19, 39, 0.56);
  --ink-4: rgba(23, 19, 39, 0.42);

  /* состояния */
  --ok: #0f8a5f;
  --warn: #9a6708;
  --bad: #cf3a3a;
  --ok-bg: rgba(15, 138, 95, 0.12);
  --warn-bg: rgba(197, 143, 24, 0.18);
  --bad-bg: rgba(207, 58, 58, 0.12);
  --none-bg: rgba(24, 18, 48, 0.06);
  --alert-bg: rgba(207, 58, 58, 0.12);
  --alert-ink: #a32323;

  /* выбранное и бейджи */
  --badge-bg: rgba(122, 79, 238, 0.14);
  --badge-ink: #6b3fe0;
  --chip-on-bg: rgba(122, 79, 238, 0.14);
  --chip-on-ring: rgba(122, 79, 238, 0.45);

  /* иконки – только непрозрачные значения */
  --ico: #7d7b86;
  --ico-dim: #9e9ca4;
  --ico-soft: #4f4c5b;

  --scheme: light;

  /* шкалы – одинаковы в обеих темах */
  --r-1: 8px;
  --r-2: 10px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 18px;
  --r-pill: 999px;
  --r-tile: 19.5%; /* скругление плитки знака: 25 из 128 */

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;

  /* размеры шрифта – префикс fs-, чтобы не путались с тонами --t-* */
  --fs-cap: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 30px;

  --z-sticky: 6;
  --z-scrim: 30;
  --z-pop: 40;
  --z-drawer: 40;
  --z-sheet: 60;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d1: 160ms;
  --d2: 240ms;
  --d3: 360ms;

  --ring: 0 0 0 2px var(--chip-on-ring);

  /* Фон аватара человека – палитра Dreams ID (repos/dreams-id/server/app/avatars.py): светлый
     тон в светлой теме, глубокий в тёмной. Ключ приходит из профиля, цвет выбирает тема */
  --face-red: #fecaca;
  --face-orange: #fed7aa;
  --face-amber: #fde68a;
  --face-yellow: #fef08a;
  --face-lime: #d9f99d;
  --face-green: #bbf7d0;
  --face-teal: #99f6e4;
  --face-cyan: #a5f3fc;
  --face-sky: #bae6fd;
  --face-blue: #bfdbfe;
  --face-indigo: #c7d2fe;
  --face-violet: #ddd6fe;
  --face-purple: #e9d5ff;
  --face-pink: #fbcfe8;
  --face-rose: #fecdd3;
  --face-grey: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --violet: #8a63ff;
    --violet-2: #b17cff;

    --bg: #0a0a0f;
    --page-glow:
      radial-gradient(900px 600px at 80% -10%, rgba(138, 99, 255, 0.25), transparent 60%),
      radial-gradient(700px 500px at -10% 30%, rgba(91, 140, 255, 0.18), transparent 60%),
      radial-gradient(1000px 700px at 50% 110%, rgba(177, 75, 255, 0.14), transparent 60%), #06060a;
    --card: #14141d;
    --card-2: #1b1b26;
    --thead-bg: #16161f;
    --input-bg: rgba(0, 0, 0, 0.25);
    --row-hover: rgba(255, 255, 255, 0.03);
    --hover-tint: rgba(255, 255, 255, 0.06);
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    --scrim: rgba(0, 0, 0, 0.6);

    --ink: #ffffff;
    --ink-2: rgba(255, 255, 255, 0.72);
    --ink-3: rgba(255, 255, 255, 0.5);
    --ink-4: rgba(255, 255, 255, 0.32);

    --ok: #3dd68c;
    --warn: #ffc94a;
    --bad: #ff6b6b;
    --ok-bg: rgba(61, 214, 140, 0.13);
    --warn-bg: rgba(255, 201, 74, 0.14);
    --bad-bg: rgba(255, 107, 107, 0.16);
    --none-bg: rgba(255, 255, 255, 0.05);
    --alert-bg: rgba(255, 107, 107, 0.14);
    --alert-ink: #ffb4b4;

    --badge-bg: rgba(138, 99, 255, 0.2);
    --badge-ink: #b17cff;
    --chip-on-bg: rgba(138, 99, 255, 0.22);
    --chip-on-ring: rgba(138, 99, 255, 0.4);

    --ico: #8a8a8e;
    --ico-dim: #5f5f65;
    --ico-soft: #bdbdc0;

    /* тона: плоские светлеют, обсидиан светлеет целиком – тёмный конец сливался с карточкой */
    --s-violet: #a98bff;
    --s-blue: #82aaff;
    --s-teal: #5ad1d1;
    --s-cyan: #7fd8ff;
    --s-sky: #8fe3ff;
    --s-indigo: #8a9bff;
    --s-green: #6ee7a8;
    --s-lime: #b6e36b;
    --s-amber: #ffc072;
    --s-coral: #ffb199;
    --s-rose: #ff9ac1;
    --s-pink: #e27bff;
    --s-orchid: #f0a6ff;
    --s-slate: #b6bcd1;
    --s-red: #ff8a8a;
    --s-orange: #ffc46b;
    --s-yellow: #ffe07d;
    --s-purple: #d8a6ff;
    --s-obsidian: #a8a8bb;
    --t-obsidian: linear-gradient(135deg, #c6c6d6, #8a8a9e);

    --scheme: dark;

    --face-red: #991b1b;
    --face-orange: #9a3412;
    --face-amber: #92400e;
    --face-yellow: #854d0e;
    --face-lime: #3f6212;
    --face-green: #166534;
    --face-teal: #115e59;
    --face-cyan: #155e75;
    --face-sky: #075985;
    --face-blue: #1e40af;
    --face-indigo: #3730a3;
    --face-violet: #5b21b6;
    --face-purple: #6b21a8;
    --face-pink: #9d174d;
    --face-rose: #9f1239;
    --face-grey: #334155;
  }
}

:root[data-theme="dark"] {
  --violet: #8a63ff;
  --violet-2: #b17cff;

  --bg: #0a0a0f;
  --page-glow:
    radial-gradient(900px 600px at 80% -10%, rgba(138, 99, 255, 0.25), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(91, 140, 255, 0.18), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(177, 75, 255, 0.14), transparent 60%), #06060a;
  --card: #14141d;
  --card-2: #1b1b26;
  --thead-bg: #16161f;
  --input-bg: rgba(0, 0, 0, 0.25);
  --row-hover: rgba(255, 255, 255, 0.03);
  --hover-tint: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.6);

  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.5);
  --ink-4: rgba(255, 255, 255, 0.32);

  --ok: #3dd68c;
  --warn: #ffc94a;
  --bad: #ff6b6b;
  --ok-bg: rgba(61, 214, 140, 0.13);
  --warn-bg: rgba(255, 201, 74, 0.14);
  --bad-bg: rgba(255, 107, 107, 0.16);
  --none-bg: rgba(255, 255, 255, 0.05);
  --alert-bg: rgba(255, 107, 107, 0.14);
  --alert-ink: #ffb4b4;

  --badge-bg: rgba(138, 99, 255, 0.2);
  --badge-ink: #b17cff;
  --chip-on-bg: rgba(138, 99, 255, 0.22);
  --chip-on-ring: rgba(138, 99, 255, 0.4);

  --ico: #8a8a8e;
  --ico-dim: #5f5f65;
  --ico-soft: #bdbdc0;

  /* тона: плоские светлеют, обсидиан светлеет целиком – тёмный конец сливался с карточкой */
  --s-violet: #a98bff;
  --s-blue: #82aaff;
  --s-teal: #5ad1d1;
  --s-cyan: #7fd8ff;
  --s-sky: #8fe3ff;
  --s-indigo: #8a9bff;
  --s-green: #6ee7a8;
  --s-lime: #b6e36b;
  --s-amber: #ffc072;
  --s-coral: #ffb199;
  --s-rose: #ff9ac1;
  --s-pink: #e27bff;
  --s-orchid: #f0a6ff;
  --s-slate: #b6bcd1;
  --s-red: #ff8a8a;
  --s-orange: #ffc46b;
  --s-yellow: #ffe07d;
  --s-purple: #d8a6ff;
  --s-obsidian: #a8a8bb;
  --t-obsidian: linear-gradient(135deg, #c6c6d6, #8a8a9e);

  --scheme: dark;

  --face-red: #991b1b;
  --face-orange: #9a3412;
  --face-amber: #92400e;
  --face-yellow: #854d0e;
  --face-lime: #3f6212;
  --face-green: #166534;
  --face-teal: #115e59;
  --face-cyan: #155e75;
  --face-sky: #075985;
  --face-blue: #1e40af;
  --face-indigo: #3730a3;
  --face-violet: #5b21b6;
  --face-purple: #6b21a8;
  --face-pink: #9d174d;
  --face-rose: #9f1239;
  --face-grey: #334155;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}