/* ==============================================================
   NotebookStock — дизайн-токени (кольори, тіні)
   Спільні для всього сайту: і публічної частини, і адмінки.
   Підключати ПЕРШИМ CSS-файлом на кожній сторінці.
   ============================================================== */

:root{
  /* Visual reference: shared layout and palette primitives. */
  /* Reference desktop frames are 1920px wide with 175px side margins (1570px max width). */
  --content-max: 1570px;
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --radius-card: 32px;
  --radius-panel: 32px;
  --radius-hero: 48px;
  --radius-hero-mobile: 32px;
  --radius-pill: 9999px;
  --violet: #9747ff;
  --violet-hover: #8330ee;
  --violet-soft: #f4ecff;
  --brand: #a6d934;
  --brand-hover: #95c52b;
  --brand-foreground: #1f1c22;
  --gray-light: #f9fafb;
  --gray-base: #dde6eb;
  --gray-mid: #aebac0;
  --gray-dark: #888e92;
  --black: #1f1c22;
  --bg: #ffffff;
  --bg2: #f9fafb;
  --bg3: #dde6eb;
  --bg4: #f9fafb;
  --text: #1f1c22;
  --text2: #888e92;
  --text3: #888e92;
  --border: #dde6eb;
  --border2: #aebac0;
  --primary: var(--violet);
  --primary-bg: var(--violet-soft);
  --primary-text: #9747ff;
  --lime: #a6d934;
  --lime-bg: rgba(166,217,52,0.12);
  --lime-text: #6f9c0e;
  --lime-dot: var(--brand);
  --card: #ffffff;
  --header-bg: rgba(255,255,255,0.92);
  --input-bg: #f5f5f3;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --danger: #ff3b30;
  --danger-bg: #fbebe9;
  --warn-text: #ff9500;
  --warn-bg: #fff6e8;
  --info: #185fa5;
  --info-bg: #e6f1fb;
  --ink: #1f1c22;
  --ink-text: #ffffff;
  --shadow-card: 0px 4px 32px rgba(79, 46, 132, 0.16);
  --shadow-card-hover: 0px 8px 40px rgba(79, 46, 132, 0.22);
  --shadow-card-mobile: 0px 2px 24px rgba(79, 46, 132, 0.08);
  --shadow-drawer: -4px 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-input-focus: 0px 4px 24px rgba(79, 46, 132, 0.16);
  --shadow-btn-violet: 0px 4px 24px rgba(79, 46, 132, 0.24);
  --shadow-btn-brand: 0 12px 32px rgba(166, 217, 52, 0.35);
  --shadow-float: 0 18px 40px -18px rgba(40,38,45,.28);

  /* Status & Condition Badges */
  --badge-new-bg: #86ba0f;
  --badge-new-text: #ffffff;
  --badge-top-bg: #ff871a;
  --badge-top-text: #ffffff;
  --badge-sale-bg: #9747ff;
  --badge-sale-text: #ffffff;
  --badge-sold-bg: #ff302b;
  --badge-sold-text: #ffffff;
  --badge-reserve-bg: #1f1c22;
  --badge-reserve-text: #ffffff;
  --badge-cond-perfect-bg: #86ba0f;
  --badge-cond-perfect-text: #ffffff;
  --badge-cond-good-bg: #148aea;
  --badge-cond-good-text: #ffffff;
  --badge-cond-fair-bg: #888e92;
  --badge-cond-fair-text: #ffffff;
  --badge-soft-green-bg: rgba(134, 186, 15, 0.08);
  --badge-soft-green-text: #86ba0f;
  --badge-soft-blue-bg: rgba(20, 138, 234, 0.08);
  --badge-soft-blue-text: #148aea;
  --badge-soft-gray-bg: rgba(174, 186, 192, 0.08);
  --badge-soft-gray-text: #888e92;

  /* Border Radii */
  --radius-btn: 40px;
  --radius-card-desktop: 16px;
  --radius-card-mobile: 8px;
  --radius-input: 8px;
  --radius-pill-sm: 16px;
}

/* Доступність: стандартизований фокус для клавіатурної навігації (WCAG 2.2 AA) */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* Тактильний відгук при натисканні (Tactile Feedback) */
.btn-press:active,
button:active:not(:disabled),
.hnav-btn:active,
.hero-cta:active,
.view-btn:active,
.card-btn:active,
.circle-cta:active {
  transform: scale(0.97);
}

/* Базовий скидання — теж спільне для всіх сторінок */
*{margin:0;padding:0;box-sizing:border-box;transition:background-color .2s,color .18s,border-color .18s}

/* Доступність: вимкнення анімацій при чутливості до руху (WCAG standard) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}