/* =========================================================================
   ОБЕРТ / Design System — ТЕМА (тільки токени, жодної верстки)
   Демонстраційний стенд GuardLabs. Один файл — одне джерело правди на 4 сторінки.
   Значення задані в OKLCH; для старих рушіїв нижче лежить hex-дублікат.
   ========================================================================= */

:root {
  /* --- 1. Палітра-примітиви (сирі значення, у верстці не використовуються) --- */
  --pine-100:#dcf4e7; --pine-200:#b8e3cd; --pine-300:#7ac3a0; --pine-400:#47a078;
  --pine-500:#237a57; --pine-600:#146143; --pine-700:#0d4931; --pine-800:#073120;

  --brass-100:#fdeed7; --brass-200:#f6d5a3; --brass-300:#f0be6d; --brass-400:#e0a53e;
  --brass-500:#c7902a; --brass-600:#946600; --brass-700:#73510e;

  --clay-100:#ffe6e3; --clay-300:#eb827b; --clay-500:#c43f3e; --clay-600:#a32c2d;
  --plum-100:#f7e7f5; --plum-300:#cc96c6; --plum-500:#7c4178;

  --warm-0:#ffffff;  --warm-25:#fbfaf6; --warm-50:#f5f3ec; --warm-150:#e2e0d7;
  --warm-300:#cac7bc; --warm-500:#727067; --warm-650:#5b584d; --warm-900:#221f14;
  --coal-900:#14130d; --coal-800:#1e1c14; --coal-700:#2a281f;
  --coal-600:#38352c; --coal-500:#504d42; --coal-200:#89867d; --coal-100:#bab7ae; --coal-50:#f2f0ea;

  /* --- 2. Семантика: світла тема (значення за замовчуванням) --- */
  --bg:            var(--warm-25);
  --surface:       var(--warm-0);
  --surface-2:     var(--warm-50);
  --surface-inv:   var(--coal-900);
  --line:          var(--warm-150);
  --line-strong:   var(--warm-300);
  --text:          var(--warm-900);
  --text-2:        var(--warm-650);
  --text-3:        var(--warm-500);
  --text-inv:      var(--coal-50);

  --accent:        var(--pine-500);
  --accent-hover:  var(--pine-600);
  --accent-soft:   var(--pine-100);
  --accent-text:   var(--pine-700);
  --on-accent:     #ffffff;

  --accent-2:      var(--brass-600);   /* акцент №2: підкреслення, метрики, теги */
  --accent-2-soft: var(--brass-100);
  --accent-2-line: var(--brass-400);

  --ok:            var(--pine-500);   --ok-soft:      var(--pine-100);
  --warn:          var(--brass-700);  --warn-soft:    var(--brass-100);
  --danger:        var(--clay-500);   --danger-soft:  var(--clay-100);
  --danger-hover:  var(--clay-600);
  --info:          var(--plum-500);   --info-soft:    var(--plum-100);

  --focus:         var(--brass-600);   /* фокус — окремий колір, не колір бренду */
  --overlay:       rgba(34,31,20,.52);

  /* --- 3. Сітка відступів: крок 4px, усі значення кратні 4 --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* --- 4. Типографіка --- */
  --font-display:"Unbounded","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-text:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-3xs:11px; --fs-2xs:12px; --fs-xs:14px; --fs-sm:15px; --fs-md:16px;
  --fs-lg:18px;  --fs-xl:21px;  --fs-2xl:26px; --fs-3xl:32px;
  --fs-4xl:40px; --fs-5xl:52px; --fs-6xl:64px;

  --lh-tight:1.16; --lh-snug:1.32; --lh-base:1.6; --lh-loose:1.75;
  --tr-tight:-0.02em; --tr-flat:0em; --tr-wide:0.14em;

  /* --- 5. Радіуси --- */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  /* --- 6. Тіні: теплі, з відтінком тексту, не сірі --- */
  --sh-1:0 1px 2px rgba(34,31,20,.06), 0 1px 1px rgba(34,31,20,.04);
  --sh-2:0 4px 12px rgba(34,31,20,.07), 0 1px 3px rgba(34,31,20,.05);
  --sh-3:0 12px 32px rgba(34,31,20,.10), 0 2px 8px rgba(34,31,20,.05);
  --sh-4:0 28px 64px rgba(34,31,20,.16), 0 4px 12px rgba(34,31,20,.06);

  /* --- 7. Рух --- */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* --- 8. Сітка макета --- */
  --page:1200px; --page-narrow:760px; --gutter:var(--sp-6);
  color-scheme: light;
}

/* --- 2b. Семантика: темна тема. Перевизначаються ТІЛЬКИ ролі, не примітиви --- */
:root[data-theme="dark"] {
  --bg:            var(--coal-900);
  --surface:       var(--coal-800);
  --surface-2:     var(--coal-700);
  --surface-inv:   var(--coal-50);
  --line:          var(--coal-600);
  --line-strong:   var(--coal-500);
  --text:          var(--coal-50);
  --text-2:        var(--coal-100);
  --text-3:        var(--coal-200);
  --text-inv:      var(--warm-900);

  --accent:        var(--pine-300);
  --accent-hover:  var(--pine-200);
  --accent-soft:   var(--pine-800);
  --accent-text:   var(--pine-200);
  --on-accent:     var(--pine-800);

  --accent-2:      var(--brass-300);
  --accent-2-soft: #3a2f18;
  --accent-2-line: var(--brass-500);

  --ok:var(--pine-300);    --ok-soft:var(--pine-800);
  --warn:var(--brass-300); --warn-soft:#3a2f18;
  --danger:var(--clay-300); --danger-soft:#43201f; --danger-hover:#f0a29c;
  --info:var(--plum-300);  --info-soft:#3b2439;

  --focus:var(--brass-300);
  --overlay:rgba(6,6,4,.66);

  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 4px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --sh-3:0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --sh-4:0 28px 64px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* Системна тема, поки користувач не вибрав вручну */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:var(--coal-900); --surface:var(--coal-800); --surface-2:var(--coal-700);
    --surface-inv:var(--coal-50);
    --line:var(--coal-600); --line-strong:var(--coal-500);
    --text:var(--coal-50); --text-2:var(--coal-100); --text-3:var(--coal-200);
    --text-inv:var(--warm-900);
    --accent:var(--pine-300); --accent-hover:var(--pine-200);
    --accent-soft:var(--pine-800); --accent-text:var(--pine-200); --on-accent:var(--pine-800);
    --accent-2:var(--brass-300); --accent-2-soft:#3a2f18; --accent-2-line:var(--brass-500);
    --ok:var(--pine-300); --ok-soft:var(--pine-800);
    --warn:var(--brass-300); --warn-soft:#3a2f18;
    --danger:var(--clay-300); --danger-soft:#43201f; --danger-hover:#f0a29c;
    --info:var(--plum-300); --info-soft:#3b2439;
    --focus:var(--brass-300); --overlay:rgba(6,6,4,.66);
    --sh-1:0 1px 2px rgba(0,0,0,.45);
    --sh-2:0 4px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --sh-3:0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    --sh-4:0 28px 64px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

/* Рушії з підтримкою OKLCH отримують ті самі кольори у ширшому охопленні.
   Порядок важливий: hex вище лишається запасним варіантом. */
@supports (color: oklch(0.5 0.1 160)) {
  :root {
    --pine-100:oklch(.945 .030 162); --pine-200:oklch(.880 .055 162);
    --pine-300:oklch(.760 .090 162); --pine-400:oklch(.640 .105 162);
    --pine-500:oklch(.520 .100 162); --pine-600:oklch(.440 .088 162);
    --pine-700:oklch(.360 .072 162); --pine-800:oklch(.280 .055 162);
    --brass-100:oklch(.955 .035 78); --brass-200:oklch(.890 .075 78);
    --brass-300:oklch(.830 .115 78); --brass-400:oklch(.760 .135 78);
    --brass-500:oklch(.690 .130 78); --brass-600:oklch(.545 .115 78);
    --brass-700:oklch(.460 .090 78);
    --clay-100:oklch(.945 .030 25); --clay-300:oklch(.720 .130 25);
    --clay-500:oklch(.560 .170 25); --clay-600:oklch(.480 .155 25);
    --plum-100:oklch(.945 .025 330); --plum-300:oklch(.740 .090 330);
    --plum-500:oklch(.470 .110 330);
    --warm-25:oklch(.985 .006 95); --warm-50:oklch(.965 .010 95);
    --warm-150:oklch(.905 .012 95); --warm-300:oklch(.830 .016 95);
    --warm-500:oklch(.545 .014 95); --warm-650:oklch(.460 .018 95);
    --warm-900:oklch(.240 .020 95);
    --coal-900:oklch(.185 .012 95); --coal-800:oklch(.225 .014 95);
    --coal-700:oklch(.275 .016 95); --coal-600:oklch(.330 .016 95);
    --coal-500:oklch(.420 .018 95); --coal-200:oklch(.620 .014 95);
    --coal-100:oklch(.780 .014 95); --coal-50:oklch(.955 .008 95);
  }
}