/* tokens.css - два слоя: палитра и роли.
   Палитра - сырые значения стиля. Роли - то, чем пользуются компоненты.
   Ни один компонент не берёт значение из палитры напрямую и не пишет цвет литералом:
   тогда скин меняется одной правкой этого файла, а блоки не трогаются.

   Стиль neobrutalism из каталога: жирные рамки, высокий контраст, плотный ритм.
   Шкала шрифта 13/15/17/21/27/35, отступы 4/8/12/16/24/32.
   Палитра переписана под цвета Angry Birds: красный шар, жёлтый клюв, зелёная свинья,
   небо, дерево и камень постройки. */

:root {
  color-scheme: light dark;

  /* ПАЛИТРА */
  --p-red:        #d6301f;
  --p-red-deep:   #a32115;
  --p-red-soft:   #f0463a;
  --p-yellow:     #ffc400;
  --p-yellow-deep:#d99f00;
  --p-green:      #5fae3c;
  --p-green-soft: #8fd06c;
  --p-sky:        #9fe0fb;
  --p-sky-deep:   #2b8fc0;
  --p-wood:       #c58a4e;
  --p-wood-deep:  #8a5a2b;
  --p-stone:      #9aa5b1;
  --p-bronze:     #cd7f42;
  --p-silver:     #d5dade;
  --p-gem:        #46c7e8;
  --p-ink:        #16161d;
  --p-ink-soft:   #4a4a58;
  --p-paper:      #fff8ec;
  --p-paper-2:    #ffefd6;
  --p-white:      #ffffff;
  --p-night:      #14141b;
  --p-night-2:    #1f1f2b;
  --p-night-3:    #2b2b3a;
  --p-chalk:      #f4f1e8;
  --p-chalk-soft: #b8b4a8;

  /* ШКАЛА ШРИФТА */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.3125rem;
  --fs-xl: 1.6875rem;
  --fs-2xl: 2.1875rem;

  /* РИТМ ОТСТУПОВ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --border-w: 3px;
  --shadow-hard: 6px 6px 0 var(--role-shadow);
  --shadow-hard-sm: 4px 4px 0 var(--role-shadow);

  /* РОЛИ: светлая тема объявляется полностью здесь, в голом :root.
     Тёмный блок ниже только переопределяет, а не заводит новые роли. */
  --role-bg:          var(--p-paper);
  --role-bg-alt:      var(--p-paper-2);
  --role-surface:     var(--p-white);
  --role-surface-2:   var(--p-paper-2);
  --role-text:        var(--p-ink);
  --role-text-muted:  var(--p-ink-soft);
  --role-border:      var(--p-ink);
  --role-shadow:      var(--p-ink);
  --role-accent:      var(--p-red);
  --role-accent-text: var(--p-white);
  --role-accent-hover:var(--p-red-deep);
  --role-mark:        var(--p-yellow);
  --role-mark-text:   var(--p-ink);
  --role-link:        var(--p-red-deep);
  --role-link-hover:  var(--p-red);
  --role-focus:       var(--p-sky-deep);
  --role-header-bg:   var(--p-yellow);
  --role-header-text: var(--p-ink);
  --role-backdrop:    rgba(20, 20, 27, 0.62);
  --role-footer-bg:   var(--p-ink);
  --role-footer-text: var(--p-chalk);
  --role-footer-muted:var(--p-chalk-soft);
  --role-code-bg:     var(--p-paper-2);

  /* РОЛИ РИСУНКОВ. Вынесены отдельно, потому что SVG живёт в шаблоне и обязан
     переезжать в тёмную тему вместе со всем остальным. */
  --art-sky:       var(--p-sky);
  --art-sun:       var(--p-yellow);
  --art-ground:    var(--p-green);
  --art-ball:      var(--p-red);
  --art-line:      var(--p-ink);
  --art-white:     var(--p-white);
  --art-wood:      var(--p-wood);
  --art-wood-dark: var(--p-wood-deep);
  --art-stone:     var(--p-stone);
  --art-gold:      var(--p-yellow);
  --art-silver:    var(--p-silver);
  --art-bronze:    var(--p-bronze);
  --art-gem:       var(--p-gem);
  --art-pig:       var(--p-green-soft);
  --art-pig-dark:  var(--p-green);
  --art-bird:      var(--p-red-soft);
  --art-ghost:     var(--p-sky);
  --art-panel:     var(--p-paper-2);
  --art-wheel-bg:  var(--p-paper-2);
  --art-arc-1:     var(--p-red);
  --art-arc-2:     var(--p-yellow-deep);
  --art-arc-3:     var(--p-green);
  --art-arc-4:     var(--p-sky-deep);
  --art-arc-5:     var(--p-wood-deep);
  --art-arc-6:     var(--p-stone);
}

/* Системная тёмная. Условие :not([data-theme="light"]) оставляет ручной выбор
   светлой темы сильнее системы. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --role-bg:          var(--p-night);
    --role-bg-alt:      var(--p-night-2);
    --role-surface:     var(--p-night-2);
    --role-surface-2:   var(--p-night-3);
    --role-text:        var(--p-chalk);
    --role-text-muted:  var(--p-chalk-soft);
    --role-border:      var(--p-chalk);
    --role-shadow:      #000000;
    --role-accent:      var(--p-red-soft);
    --role-accent-text: var(--p-night);
    --role-accent-hover:var(--p-yellow);
    --role-mark:        var(--p-yellow);
    --role-mark-text:   var(--p-night);
    --role-link:        var(--p-yellow);
    --role-link-hover:  var(--p-red-soft);
    --role-focus:       var(--p-gem);
    --role-header-bg:   var(--p-night-2);
    --role-header-text: var(--p-chalk);
    --role-backdrop:    rgba(0, 0, 0, 0.7);
    --role-footer-bg:   var(--p-night-2);
    --role-footer-text: var(--p-chalk);
    --role-footer-muted:var(--p-chalk-soft);
    --role-code-bg:     var(--p-night-3);
    --art-sky:          #1d3a4d;
    --art-ground:       #2f6b28;
    --art-line:         var(--p-chalk);
    --art-white:        var(--p-night);
    --art-panel:        var(--p-night-3);
    --art-wheel-bg:     var(--p-night-3);
    --art-ghost:        #1d3a4d;
  }
}

/* Ручной выбор тёмной темы перебивает светлую систему. */
:root[data-theme="dark"] {
  --role-bg:          var(--p-night);
  --role-bg-alt:      var(--p-night-2);
  --role-surface:     var(--p-night-2);
  --role-surface-2:   var(--p-night-3);
  --role-text:        var(--p-chalk);
  --role-text-muted:  var(--p-chalk-soft);
  --role-border:      var(--p-chalk);
  --role-shadow:      #000000;
  --role-accent:      var(--p-red-soft);
  --role-accent-text: var(--p-night);
  --role-accent-hover:var(--p-yellow);
  --role-mark:        var(--p-yellow);
  --role-mark-text:   var(--p-night);
  --role-link:        var(--p-yellow);
  --role-link-hover:  var(--p-red-soft);
  --role-focus:       var(--p-gem);
  --role-header-bg:   var(--p-night-2);
  --role-header-text: var(--p-chalk);
  --role-backdrop:    rgba(0, 0, 0, 0.7);
  --role-footer-bg:   var(--p-night-2);
  --role-footer-text: var(--p-chalk);
  --role-footer-muted:var(--p-chalk-soft);
  --role-code-bg:     var(--p-night-3);
  --art-sky:          #1d3a4d;
  --art-ground:       #2f6b28;
  --art-line:         var(--p-chalk);
  --art-white:        var(--p-night);
  --art-panel:        var(--p-night-3);
  --art-wheel-bg:     var(--p-night-3);
  --art-ghost:        #1d3a4d;
}