/* ============================================================
   DStudio — Design tokens
   Концепция: два слоя. «Двигун» — глубокая тьма машинного зала.
   «Вітрина» — светлый дневной свет. Страница дышит между ними.
   ============================================================ */

:root {
  /* ---------- Ink / Surfaces (dark layer) ---------- */
  --ink-1000: #05060a;   /* абсолютная глубина, фон hero */
  --ink-950:  #080a11;
  --ink-900:  #0b0e17;   /* базовый тёмный фон */
  --ink-850:  #101423;
  --ink-800:  #151a2c;   /* карточки на тёмном */
  --ink-700:  #1d2438;
  --ink-600:  #2a3350;

  /* ---------- Paper / Surfaces (light layer) ---------- */
  --paper-0:   #ffffff;
  --paper-50:  #fbfaf8;  /* тёплая бумага, не стерильно-белая */
  --paper-100: #f4f2ee;
  --paper-200: #e8e5df;
  --paper-300: #d6d2ca;

  /* ---------- Text ---------- */
  --text-on-dark:        #f2f4f9;
  --text-on-dark-muted:  #9aa3bd;
  --text-on-dark-faint:  #626c88;
  --text-on-light:       #0d1017;
  --text-on-light-muted: #56606f;
  --text-on-light-faint: #8a929e;

  /* ---------- Accent ---------- */
  /* Электрический индиго — «ток», который проходит через систему */
  --volt-400: #8b93ff;
  --volt-500: #6b6bff;
  --volt-600: #5147f5;
  --volt-700: #3d2fd6;

  /* Тёплый янтарь — «работает, живое», для данных и акцентов */
  --amber-400: #ffc555;
  --amber-500: #ffab2e;
  --amber-600: #f08c00;

  /* Мятный — «готово / успех» */
  --mint-400: #5ce6b4;
  --mint-500: #21cf92;

  --coral-500: #ff6b5b; /* «было / проблема» */

  /* ---------- Semantic ---------- */
  --accent:        var(--volt-500);
  --accent-strong: var(--volt-600);
  --accent-soft:   var(--volt-400);

  /* ---------- Glow / Glass ---------- */
  --glow-volt: 0 0 0 1px rgba(107,107,255,.28), 0 12px 48px -12px rgba(107,107,255,.55);
  --glass-dark: rgba(255,255,255,.045);
  --glass-dark-border: rgba(255,255,255,.09);
  --glass-light: rgba(13,16,23,.035);
  --glass-light-border: rgba(13,16,23,.09);

  /* ---------- Elevation ---------- */
  --shadow-sm:  0 1px 2px rgba(5,6,10,.30);
  --shadow-md:  0 8px 24px -8px rgba(5,6,10,.45);
  --shadow-lg:  0 24px 64px -20px rgba(5,6,10,.65);
  --shadow-xl:  0 48px 120px -32px rgba(5,6,10,.80);
  --shadow-screen: 0 40px 100px -24px rgba(5,6,10,.72), 0 2px 0 0 rgba(255,255,255,.06) inset;

  /* ---------- Type ---------- */
  --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --font-sans:    'Onest', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Фluid-шкала: clamp(min, preferred, max) */
  --t-hero:  clamp(2.4rem, 1.15rem + 3.5vw, 4.75rem);
  --t-h1:    clamp(2rem, 1.15rem + 2.8vw, 3.75rem);
  --t-h2:    clamp(1.7rem, 1.1rem + 2vw, 2.9rem);
  --t-h3:    clamp(1.35rem, 1rem + 1.4vw, 2rem);
  --t-h4:    clamp(1.1rem, .95rem + .7vw, 1.4rem);
  --t-lead:  clamp(1.05rem, .95rem + .6vw, 1.375rem);
  --t-body:  clamp(.975rem, .93rem + .22vw, 1.0625rem);
  --t-small: .875rem;
  --t-micro: .75rem;

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-body:  1.62;

  --ls-hero:  -.035em;
  --ls-head:  -.025em;
  --ls-body:  -.008em;
  --ls-eyebrow: .16em;

  /* ---------- Space (8px база) ---------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6.5rem; --s-12: 8rem;
  --s-13: 10rem;  --s-14: 12.5rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 10rem);
  --gutter:    clamp(1.25rem, .6rem + 2.6vw, 4rem);
  --maxw:      1320px;
  --maxw-text: 68ch;

  /* ---------- Radius ---------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px;
  --r-lg: 24px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px;

  /* ---------- Motion ---------- */
  /* Единая «физика» интерфейса: всё замедляется мягко, ничего не дёргается */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:cubic-bezier(.65, 0, .35, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);

  --d-fast:  .18s;
  --d-base:  .32s;
  --d-slow:  .6s;
  --d-reveal:.9s;

  --border-hairline: 1px solid var(--glass-dark-border);
}

/* Светлая секция переопределяет семантику, а не хардкодит цвета */
.layer-light {
  --bg:        var(--paper-50);
  --bg-raised: var(--paper-0);
  --fg:        var(--text-on-light);
  --fg-muted:  var(--text-on-light-muted);
  --fg-faint:  var(--text-on-light-faint);
  --hairline:  var(--glass-light-border);
  --glass:     var(--glass-light);
}

.layer-dark {
  --bg:        var(--ink-900);
  --bg-raised: var(--ink-800);
  --fg:        var(--text-on-dark);
  --fg-muted:  var(--text-on-dark-muted);
  --fg-faint:  var(--text-on-dark-faint);
  --hairline:  var(--glass-dark-border);
  --glass:     var(--glass-dark);
}

.layer-void {
  --bg:        var(--ink-1000);
  --bg-raised: var(--ink-850);
  --fg:        var(--text-on-dark);
  --fg-muted:  var(--text-on-dark-muted);
  --fg-faint:  var(--text-on-dark-faint);
  --hairline:  var(--glass-dark-border);
  --glass:     var(--glass-dark);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: .01ms; --d-base: .01ms; --d-slow: .01ms; --d-reveal: .01ms; }
}