/* OAKBERRY — токены проекта.
   Палитра снята с oakberry.com через dembrandt и сверена со скриншотом:
   берётся palette по частоте употребления, semantic инструмента игнорируется.

   Шрифты — настоящие, с сайта бренда. Для внутреннего макета и портфолио.
   Nexa Slab и Nighty коммерческие (Fontfabric); при публичном продакшене
   заменить или лицензировать. */

/* ─── Гарнитуры ─────────────────────────────────────────────────── */

@font-face {
  font-family: "Nexa Slab";
  src: url("assets/fonts/ff555060b21155cc-s.p.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa Slab";
  src: url("assets/fonts/c9905c6c55b11400-s.p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa Slab";
  src: url("assets/fonts/1a8e5887278c151c-s.p.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa Slab";
  src: url("assets/fonts/0dfd285d40c2f15e-s.p.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa Slab";
  src: url("assets/fonts/f78716f25d627c6f-s.p.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Акцидентная антиква бренда — имена вкусов, крупные акценты */
@font-face {
  font-family: "Nighty";
  src: url("assets/fonts/8bc7d73f397302d9-s.p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Токены ────────────────────────────────────────────────────── */

:root {
  /* Фирменные фиолетовые. Не серые нейтрали — весь ряд уведён в акцент. */
  --oak-900: #180520;   /* глубже фирменного, для кромок и теней */
  --oak-800: #240931;   /* тёмный фон, футер */
  --oak-700: #341046;
  --oak-600: #4a1f60;   /* основной фиолетовый бренда */
  --oak-500: #5f2f79;
  --oak-400: #7d5393;   /* светлый фиолетовый */
  --oak-300: #a586b6;
  --oak-200: #cdbad8;

  /* Кремовый и белый */
  --cream:      #f5eee0;
  --cream-dim:  #e6dcc9;
  --white:      #ffffff;

  /* Акценты бренда — из фирменных зигзагов */
  --yellow: #f7c600;
  --yellow-deep: #d9a800;
  --red:    #e8544a;

  /* Роли */
  --bg:        var(--oak-800);
  --surface:   var(--oak-600);
  --surface-2: var(--oak-700);
  --ink:       var(--cream);
  --ink-2:     var(--oak-200);
  --muted:     var(--oak-300);
  --line:      color-mix(in oklab, var(--cream) 16%, transparent);
  --accent:    var(--yellow);

  /* Типографика */
  --font-display: "Nexa Slab", Georgia, "Times New Roman", serif;
  --font-accent:  "Nighty", Georgia, "Times New Roman", serif;
  --font-text:    Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Шкала по отношению 1.25, база 16px */
  --t-xs:  12px;
  --t-sm:  14px;
  --t-md:  16px;
  --t-lg:  20px;
  --t-xl:  25px;
  --t-2xl: 31px;
  --t-3xl: 39px;
  --t-4xl: 49px;
  --t-5xl: clamp(44px, 7vw, 88px);
  --t-6xl: clamp(56px, 11vw, 148px);

  /* Трекинг заголовков — узнаваемая черта бренда */
  --track-display: .1em;

  --radius:    14px;
  --radius-lg: 26px;
  --radius-xl: 40px;

  --shadow-soft: 0 2px 8px rgba(11, 2, 16, .28), 0 18px 48px rgba(11, 2, 16, .34);
  --shadow-lift: 0 4px 14px rgba(11, 2, 16, .34), 0 30px 70px rgba(11, 2, 16, .42);

  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* Светлая тема бренда — кремовый фон, фиолетовый текст.
   Ни один цвет не объявлен только внутри media или [data-theme]. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:      var(--cream);
    --surface: var(--white);
    --surface-2: var(--cream-dim);
    --ink:     var(--oak-800);
    --ink-2:   var(--oak-600);
    --muted:   var(--oak-400);
    --line:    color-mix(in oklab, var(--oak-600) 18%, transparent);
    --shadow-soft: 0 2px 8px rgba(36, 9, 49, .07), 0 18px 48px rgba(36, 9, 49, .09);
    --shadow-lift: 0 4px 14px rgba(36, 9, 49, .10), 0 30px 70px rgba(36, 9, 49, .14);
  }
}

:root[data-theme="light"] {
  --bg:      var(--cream);
  --surface: var(--white);
  --surface-2: var(--cream-dim);
  --ink:     var(--oak-800);
  --ink-2:   var(--oak-600);
  --muted:   var(--oak-400);
  --line:    color-mix(in oklab, var(--oak-600) 18%, transparent);
  --shadow-soft: 0 2px 8px rgba(36, 9, 49, .07), 0 18px 48px rgba(36, 9, 49, .09);
  --shadow-lift: 0 4px 14px rgba(36, 9, 49, .10), 0 30px 70px rgba(36, 9, 49, .14);
}

/* ─── База ──────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);      /* обязательно явно: прозрачный body берёт фон хоста */
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
  line-height: 1.04;
}

p { margin: 0 0 14px; max-width: 62ch; color: var(--ink-2); }

.accent { font-family: var(--font-accent); text-transform: none; letter-spacing: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

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