/* 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.10), 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);
}

@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;
  }
}

: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;
}

: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;
  }
}