/* ============================================================
   ClarityBOT — Design Tokens
   Направление: тёплая бумажная база + терракотовый акцент
   ============================================================ */

/* ---------- LIGHT (по умолчанию) ---------- */
:root {
  /* Поверхности — тёплый кремовый стек */
  --bg:          #F0EEE6;   /* фон страницы, «бумага» */
  --surface:     #FAF9F5;   /* карточки */
  --surface-2:   #F4F2EA;   /* вложенные блоки, поля */
  --surface-3:   #EBE8DE;   /* hover, disabled */
  --surface-inv: #1F1E1C;   /* инверсные плашки, тултипы */

  /* Границы — тёплые, не серые */
  --border:      #E2DED1;
  --border-2:    #D3CDBB;
  --border-str:  #BFB7A1;

  /* Текст */
  --text:        #191917;
  --text-2:      #55534D;
  --text-3:      #86837A;
  --text-inv:    #F5F3EC;

  /* Акцент — терракота */
  --accent:      #C05F3C;   /* плашки, иконки, границы, заливки */
  --accent-text: #A95335;   /* мелкий текст акцентом — 4.55:1, берёт порог AA
                               (сама #C05F3C даёт лишь 3.66:1 и годится от 18px) */
  --accent-h:    #A94E2E;   /* hover / press */
  --accent-soft: #F3E4DA;   /* заливка бейджей */
  --accent-line: #E4C9B8;   /* граница на заливке */
  --accent-ink:  #FFFFFF;   /* текст на акценте */

  /* Вторичная палитра — тайлы иконок модулей */
  --kraft:   #B57E52;  --kraft-bg:   #F4E9DC;
  --manilla: #A98B48;  --manilla-bg: #F5EEDC;
  --cactus:  #4E857B;  --cactus-bg:  #E1EDE9;
  --sky:     #52789F;  --sky-bg:     #E3EBF3;
  --olive:   #6B7A4B;  --olive-bg:   #E9EDDF;
  --plum:    #7E5F91;  --plum-bg:    #EEE7F1;
  --rose:    #A8546A;  --rose-bg:    #F4E4E8;
  --stone:   #6E6A60;  --stone-bg:   #EBE9E1;

  /* Семантика */
  --ok:     #4C7A3F;  --ok-bg:     #E6EEE1;
  --warn:   #A8722A;  --warn-bg:   #F5EADA;
  --danger: #A83A32;  --danger-bg: #F5E2E0;
  --live:   #C0392B;

  /* Тени — тёплые, не синие */
  --sh-1: 0 1px 2px rgba(60,50,35,.05);
  --sh-2: 0 2px 4px -1px rgba(60,50,35,.07), 0 4px 12px -2px rgba(60,50,35,.06);
  --sh-3: 0 4px 8px -2px rgba(60,50,35,.08), 0 16px 32px -8px rgba(60,50,35,.10);
  --sh-in: inset 0 1px 0 rgba(255,255,255,.7);

  /* Зерно бумаги */
  --grain-op: .042;
  --grain-blend: multiply;

  /* Радиусы */
  --r-xs: 4px; --r-sm: 7px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* Отступы */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;

  /* Типографика */
  --font-ui:      'Golos Text', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Движение */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Размеры оболочки */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --content-max: 1240px;
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg:          #1B1A18;
  --surface:     #232220;
  --surface-2:   #2B2926;
  --surface-3:   #34322D;
  --surface-inv: #F5F3EC;

  --border:      #38352F;
  --border-2:    #474339;
  --border-str:  #5C5648;

  --text:        #F0EEE6;
  --text-2:      #B3AEA1;
  --text-3:      #837E72;
  --text-inv:    #1F1E1C;

  --accent:      #E08A66;
  --accent-text: #E08A66;   /* на тёмной развилки нет — 6.05:1, проходит везде */
  --accent-h:    #EDA080;
  --accent-soft: #3A281F;
  --accent-line: #54382A;
  --accent-ink:  #1F1E1C;

  --kraft:   #D4A27F;  --kraft-bg:   #362B22;
  --manilla: #D6BA76;  --manilla-bg: #35301F;
  --cactus:  #7FB5A9;  --cactus-bg:  #22302D;
  --sky:     #8CAFD2;  --sky-bg:     #232C36;
  --olive:   #9DAE7B;  --olive-bg:   #2A2F22;
  --plum:    #B396C4;  --plum-bg:    #2F2733;
  --rose:    #D18A9C;  --rose-bg:    #362429;
  --stone:   #A6A093;  --stone-bg:   #2D2B27;

  --ok:     #86B375;  --ok-bg:     #263021;
  --warn:   #D5A560;  --warn-bg:   #352B1D;
  --danger: #DE7A70;  --danger-bg: #362321;
  --live:   #E4695A;

  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 2px 4px -1px rgba(0,0,0,.35), 0 4px 12px -2px rgba(0,0,0,.30);
  --sh-3: 0 4px 8px -2px rgba(0,0,0,.40), 0 16px 32px -8px rgba(0,0,0,.45);
  --sh-in: inset 0 1px 0 rgba(255,255,255,.045);

  --grain-op: .05;
  --grain-blend: screen;
}

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