/* DarkPlay — index.css (страницы). Компоненты — в components.css (BBB2). */

/* ═══ TOKENS (BBB2) ═══ */
:root{
  /* Text */
  --color-text-primary:#131313;
  --color-text-secondary:#898886;
  --color-text-primary-on-dark:#FFFFFF;
  --color-text-secondary-on-dark:#A5A4A3;

  /* Surface */
  --color-surface-v0:#FAFAF7;
  --color-surface-v1:#F2F2ED;
  --color-surface-v2:#EBEBE5;
  --color-surface-v3:#BFBFB5;
  --color-surface-white:#FFFFFF;
  --color-surface-dark:#131313;

  /* Background */
  --color-bg-light:#FAFAF7;
  --color-bg-white:#FFFFFF;
  --color-bg-biege:#EAEAE9;

  /* Accent */
  --color-accent-orange:#FBE9E6;
  --color-accent-yellow:#FBF6E6;
  --color-accent-green:#F7FBE6;
  --color-accent-primary-orange:#FF6633;
  --color-accent-primary-orange-hover:#FF8A66;
  --color-accent-primary-green:#99AF61;
  --color-accent-primary-yellow:#DDA543;

  /* Neutral */
  --color-neutral-dark:#131313;
  --color-neutral-dark-hover:#333333;
  --color-neutral-white:#FFFFFF;

  /* Radii */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:99px;

  /* Line heights */
  --lh-heading:1.1;
  --lh-h4:1.4;
  --lh-body:1.6;
  --lh-16:1.5;
  --lh-14:1.4;
  --lh-12:1.3;

  /* Font weights */
  --fw-regular:400;
  --fw-semibold:600;
  --fw-heading:600;

  /* Font sizes */
  --font-h1:48px; --lh-h1:1.1;
  --font-h2:40px; --lh-h2:1.1;
  --font-h3:32px; --lh-h3:1.2;
  --font-h4:24px; --lh-h4:1.4;
  --font-h5:20px; --lh-h5:1.3;
  --font-body-lg:18px; --lh-body-lg:1.6;
  --font-body-md:16px; --lh-body-md:1.5;
  --font-body-sm:14px; --lh-body-sm:1.4;
  --font-body-xs:12px; --lh-body-xs:1.3;

  /* Shadows */
  --shadow-card:0 4px 16px rgba(0,0,0,0.08);
  --shadow-modal:0 8px 32px rgba(0,0,0,0.12);

  --font-family:'Inter';
}

/* ═══ BASE ═══ */
*,*::before,*::after{box-sizing:border-box}
body{font-family:'Inter',sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:var(--color-text-primary);background:var(--color-surface-v0);-webkit-font-smoothing:antialiased;margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent-primary-orange);text-decoration:underline;text-underline-offset:2px;transition:color .15s}
a:not([class]):hover{color:var(--color-accent-primary-orange-hover);text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* ═══ DarkPlay: главная ═══ */
.dp-main{width:100%;max-width:1170px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:56px;padding-bottom:72px}

/* Hero */
.dp-hero{padding:48px 0 8px}
.dp-hero__inner{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:760px}
.dp-hero__title{font-weight:600;font-size:var(--font-h1);line-height:var(--lh-h1);color:var(--color-text-primary);margin:0}
.dp-hero__sub{font-weight:400;font-size:var(--font-body-lg);line-height:var(--lh-body-lg);color:var(--color-text-secondary);margin:0}

/* Поиск */
.dp-search{display:flex;gap:8px;width:100%;max-width:640px;margin-top:8px}
.dp-search__input{flex:1;height:52px;padding:0 24px;border-radius:var(--radius-pill);border:1px solid var(--color-surface-v2);background:var(--color-surface-white);font-family:'Inter',sans-serif;font-size:16px;color:var(--color-text-primary);outline:none;transition:border-color .15s}
.dp-search__input:focus{border-color:var(--color-accent-primary-orange)}
.dp-search__input::placeholder{color:var(--color-text-secondary)}

/* Секции */
.dp-section{display:flex;flex-direction:column;gap:20px}
.dp-section__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dp-section__title{font-weight:600;font-size:var(--font-h2);line-height:var(--lh-h2);color:var(--color-text-primary);margin:0}
.dp-section__link{font-size:var(--font-body-md);font-weight:400;color:var(--color-accent-primary-orange);text-decoration:none;white-space:nowrap}
.dp-section__link:hover{color:var(--color-accent-primary-orange-hover);text-decoration:underline}

/* Сетки */
.dp-grid{display:grid;gap:16px}
.dp-grid--tools{grid-template-columns:repeat(4,1fr)}
.dp-grid--courses{grid-template-columns:repeat(4,1fr)}
.dp-grid--blog{grid-template-columns:repeat(3,1fr)}
.dp-grid--cats{grid-template-columns:repeat(4,1fr)}

/* Карточка */
.dp-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--radius-lg);background:var(--color-surface-white);border:1px solid var(--color-surface-v1);text-decoration:none;color:var(--color-text-primary);transition:border-color .15s,transform .15s}
.dp-card:hover{border-color:var(--color-surface-v2);transform:translateY(-2px)}
.dp-card__title{font-weight:600;font-size:var(--font-body-lg);line-height:var(--lh-body);color:var(--color-text-primary)}
.dp-card__desc{font-weight:400;font-size:var(--font-body-sm);line-height:var(--lh-14);color:var(--color-text-secondary)}

/* Чип (категории) */
.dp-chip{display:inline-flex;align-items:center;padding:10px 16px;border-radius:var(--radius-pill);background:var(--color-surface-white);border:1px solid var(--color-surface-v1);font-size:var(--font-body-sm);font-weight:400;color:var(--color-text-primary);text-decoration:none;transition:border-color .15s}
.dp-chip:hover{border-color:var(--color-surface-v3)}

.dp-empty{font-size:var(--font-body-sm);color:var(--color-text-secondary);margin:0}

/* Хлебные крошки */
.dp-crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--font-body-sm);line-height:var(--lh-14);color:var(--color-text-secondary);margin:16px 0 -8px}
.dp-crumbs a{color:var(--color-text-secondary);text-decoration:none}
.dp-crumbs a:hover{color:var(--color-accent-primary-orange)}

/* Статья (карточка сущности) */
.dp-article{display:flex;flex-direction:column;gap:20px}

/* Счётчик на карточке категории */
.dp-card__count{font-weight:400;font-size:var(--font-body-xs);line-height:var(--lh-12);color:var(--color-text-secondary)}

/* Мета-строка карточки (цена/рейтинг) */
.dp-card__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dp-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-pill);background:var(--color-surface-v1);font-size:var(--font-body-xs);line-height:var(--lh-12);color:var(--color-text-primary)}
.dp-badge--rating{background:var(--color-accent-yellow);color:var(--color-text-primary)}

/* Факты (карточка сервиса/курса) */
.dp-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.dp-fact{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--radius-md);background:var(--color-surface-white);border:1px solid var(--color-surface-v1)}
.dp-fact__label{font-size:var(--font-body-xs);line-height:var(--lh-12);color:var(--color-text-secondary)}
.dp-fact__value{font-weight:600;font-size:var(--font-body-md);line-height:var(--lh-16);color:var(--color-text-primary)}
.dp-fact__muted{font-weight:400;color:var(--color-text-secondary)}

/* FAQ (details) */
.dp-faq{display:flex;flex-direction:column;gap:12px}
.dp-faq__item{border:1px solid var(--color-surface-v1);border-radius:var(--radius-md);background:var(--color-surface-white);overflow:hidden}
.dp-faq__q{cursor:pointer;padding:16px 20px;font-weight:600;font-size:var(--font-body-md);line-height:var(--lh-16);color:var(--color-text-primary);list-style:none;display:flex;justify-content:space-between;gap:12px}
.dp-faq__q::-webkit-details-marker{display:none}
.dp-faq__q::after{content:'+';font-weight:400;color:var(--color-text-secondary);transition:transform .15s}
.dp-faq__item[open] .dp-faq__q::after{transform:rotate(45deg)}
.dp-faq__a{padding:0 20px 16px;margin:0;font-size:var(--font-body-sm);line-height:var(--lh-14);color:var(--color-text-secondary)}

/* Пагинация */
.dp-pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dp-pagination a,.dp-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--color-surface-v1);background:var(--color-surface-white);font-size:var(--font-body-sm);color:var(--color-text-primary);text-decoration:none}
.dp-pagination .dp-pagination__cur{background:var(--color-accent-primary-orange);border-color:var(--color-accent-primary-orange);color:#fff}
.dp-pagination a:hover{border-color:var(--color-surface-v3)}

/* ═══ Адаптив (единственный брейкпоинт 1169px) ═══ */
.dp-article__body{display:flex;flex-direction:column;gap:16px;color:var(--color-text-primary);font-size:var(--font-body-md);line-height:var(--lh-body)}
.dp-article__body h2{font-weight:600;font-size:var(--font-h3);line-height:var(--lh-h3);color:var(--color-text-primary);margin:24px 0 0}
.dp-article__body h3{font-weight:600;font-size:var(--font-h4);line-height:var(--lh-h4);color:var(--color-text-primary);margin:20px 0 0}
.dp-article__body h4{font-weight:600;font-size:var(--font-h5);line-height:var(--lh-h5);color:var(--color-text-primary);margin:16px 0 0}
.dp-article__body p{margin:0;font-size:var(--font-body-md);line-height:var(--lh-body);color:var(--color-text-primary)}
.dp-article__body ul,.dp-article__body ol{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.dp-article__body li{font-size:var(--font-body-md);line-height:var(--lh-body);color:var(--color-text-primary)}
.dp-article__body table{width:100%;border-collapse:collapse;font-size:var(--font-body-sm)}
.dp-article__body th,.dp-article__body td{padding:10px 14px;border:1px solid var(--color-surface-v2);text-align:left;color:var(--color-text-primary)}
.dp-article__body th{background:var(--color-surface-v1);font-weight:600}
.dp-article__body blockquote{margin:0;padding:12px 20px;border-left:3px solid var(--color-accent-primary-orange);background:var(--color-surface-v1);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text-secondary)}
.dp-article__body code{background:var(--color-surface-v1);padding:2px 6px;border-radius:var(--radius-sm);font-size:0.9em}
.dp-article__body a{color:var(--color-accent-primary-orange);text-decoration:underline;text-underline-offset:2px}
.dp-article__body strong{font-weight:600}

@media (max-width:1169px){
  .dp-main{gap:32px;padding:0 16px 48px}
  .dp-hero{padding:32px 0 4px}
  .dp-hero__title{font-size:28px;line-height:1.2}
  .dp-hero__sub{font-size:16px}
  .dp-section__title{font-size:24px}
  .dp-grid--tools,.dp-grid--courses,.dp-grid--cats{grid-template-columns:repeat(2,1fr)}
  .dp-grid--blog{grid-template-columns:1fr}
  .dp-search{flex-direction:column}
  .dp-search__btn{width:100%}
  .dp-facts{grid-template-columns:1fr 1fr}
  .dp-crumbs{margin:8px 0 -4px}
}