/* ==========================================================================
   Skins — character layer on top of color themes
   [data-skin="clean|comic|sketch|playful"]
   Orthogonal to data-theme / radius / density / control
   ========================================================================== */

:root,
[data-skin="clean"],
:root:not([data-skin]) {
  --skin-border-width: 1px;
  --skin-border-style: solid;
  --skin-shadow: var(--shadow-md);
  --skin-shadow-brand: var(--shadow-brand);
  --skin-btn-transform: none;
  --skin-btn-tracking: 0;
  --skin-btn-weight: 700;
  --skin-heading-weight: 700;
  --skin-card-rotate: 0deg;
}

/* --- Comic: жирный контур, offset-тень, плакатный display --- */
[data-skin="comic"] {
  --font-display: "Bangers", "Fredoka", system-ui, sans-serif;
  --font-sans: "Comic Neue", "Fredoka", system-ui, sans-serif;
  --skin-border-width: 3px;
  --skin-border-style: solid;
  --skin-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 88%, transparent);
  --skin-shadow-brand: 4px 4px 0 color-mix(in srgb, var(--ink) 88%, transparent);
  --skin-btn-tracking: 0.04em;
  --skin-btn-weight: 700;
  --skin-heading-weight: 400;
  --radius: 0.35rem;
}

[data-skin="comic"] h1,
[data-skin="comic"] h2,
[data-skin="comic"] h3,
[data-skin="comic"] .display-4,
[data-skin="comic"] .display-5,
[data-skin="comic"] .display-6 {
  font-weight: var(--skin-heading-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[data-skin="comic"] .btn-brand,
[data-skin="comic"] .btn-brand-outline,
[data-skin="comic"] .btn-brand-outline-inverse,
[data-skin="comic"] .btn-white-on-brand,
[data-skin="comic"] .service-card,
[data-skin="comic"] .price-card,
[data-skin="comic"] .package-card,
[data-skin="comic"] .benefit-card,
[data-skin="comic"] .icon-tile,
[data-skin="comic"] .step-card,
[data-skin="comic"] .review-card,
[data-skin="comic"] .faq-list,
[data-skin="comic"] .calc-card,
[data-skin="comic"] .hero-form-card,
[data-skin="comic"] .hero-inline-form,
[data-skin="comic"] .hero-card,
[data-skin="comic"] .mid-cta,
[data-skin="comic"] .tariff-card,
[data-skin="comic"] .amenity-item,
[data-skin="comic"] .schedule-board,
[data-skin="comic"] .buyback-table,
[data-skin="comic"] .contact-panel,
[data-skin="comic"] .form-control-brand {
  border-width: var(--skin-border-width);
  border-style: var(--skin-border-style);
  border-color: var(--ink);
  box-shadow: var(--skin-shadow);
}

[data-skin="comic"] .btn-brand,
[data-skin="comic"] .btn-white-on-brand {
  border-color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--skin-btn-tracking);
}

[data-skin="comic"] .btn-brand:hover,
[data-skin="comic"] .btn-brand-outline:hover,
[data-skin="comic"] .btn-white-on-brand:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 88%, transparent);
}

[data-skin="comic"] .btn-brand:active,
[data-skin="comic"] .btn-brand-outline:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 88%, transparent);
}

[data-skin="comic"] .site-header {
  border-bottom-width: 3px;
  border-bottom-color: var(--ink);
}

[data-skin="comic"] .eyebrow {
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.65rem;
  background: var(--brand-100);
}

/* --- Sketch: рукописные заголовки, «карандашные» края --- */
[data-skin="sketch"] {
  --font-display: "Caveat", "Segoe Print", cursive;
  --font-sans: "Onest", system-ui, sans-serif;
  --skin-border-width: 2px;
  --skin-border-style: solid;
  --skin-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
  --skin-heading-weight: 600;
  --radius: 1.1rem;
}

[data-skin="sketch"] h1,
[data-skin="sketch"] h2,
[data-skin="sketch"] h3,
[data-skin="sketch"] .display-4,
[data-skin="sketch"] .display-5,
[data-skin="sketch"] .display-6 {
  font-weight: var(--skin-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1.05;
}

[data-skin="sketch"] .form-control-brand,
[data-skin="sketch"] .service-card,
[data-skin="sketch"] .price-card,
[data-skin="sketch"] .package-card,
[data-skin="sketch"] .benefit-card,
[data-skin="sketch"] .icon-tile,
[data-skin="sketch"] .step-card,
[data-skin="sketch"] .review-card,
[data-skin="sketch"] .faq-list,
[data-skin="sketch"] .calc-card,
[data-skin="sketch"] .hero-form-card,
[data-skin="sketch"] .hero-inline-form,
[data-skin="sketch"] .tariff-card,
[data-skin="sketch"] .amenity-item,
[data-skin="sketch"] .contact-panel,
[data-skin="sketch"] .lead-inline {
  border-width: var(--skin-border-width);
  border-color: color-mix(in srgb, var(--ink) 55%, var(--line));
  border-radius: calc(var(--radius) * 1.05) calc(var(--radius) * 0.75) calc(var(--radius) * 1.15) calc(var(--radius) * 0.85);
  box-shadow: none;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--brand-50)), var(--surface));
}

/* Buttons: keep brand fill / readable text — no paper gradient wash */
[data-skin="sketch"] .btn-brand,
[data-skin="sketch"] .btn-brand-outline,
[data-skin="sketch"] .btn-brand-outline-inverse,
[data-skin="sketch"] .btn-white-on-brand {
  font-family: var(--font-display);
  font-size: calc(var(--control-fs) * 1.15);
  font-weight: 600;
  border-width: var(--skin-border-width);
  border-radius: calc(var(--radius) * 1.05) calc(var(--radius) * 0.75) calc(var(--radius) * 1.15) calc(var(--radius) * 0.85);
  background-image: none;
  box-shadow: none;
}

[data-skin="sketch"] .btn-brand {
  background-color: var(--brand-600);
  border-color: color-mix(in srgb, var(--ink) 70%, var(--brand-700));
  color: var(--on-brand, #fff);
}

[data-skin="sketch"] .btn-brand:hover,
[data-skin="sketch"] .btn-brand:focus {
  background-color: var(--brand-hover, var(--brand-700));
  border-color: var(--ink);
  color: var(--on-brand, #fff);
}

[data-skin="sketch"] .btn-brand-outline {
  background-color: var(--surface);
  border-color: color-mix(in srgb, var(--ink) 55%, var(--line));
  color: var(--ink);
}

[data-skin="sketch"] .btn-brand-outline:hover {
  background-color: var(--brand-50);
  border-color: var(--brand-600);
  color: var(--brand-700);
}

[data-skin="sketch"] .btn-brand-outline-inverse {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--on-inverse) 65%, transparent);
  color: var(--on-inverse);
}

[data-skin="sketch"] .btn-brand-outline-inverse:hover {
  background-color: color-mix(in srgb, var(--on-inverse) 12%, transparent);
  color: var(--on-inverse);
}

[data-skin="sketch"] .btn-white-on-brand {
  background-color: #fff;
  border: var(--skin-border-width) solid color-mix(in srgb, var(--ink) 55%, transparent);
  color: #0f172a;
}

[data-skin="sketch"] .btn-white-on-brand:hover {
  background-color: var(--brand-50);
  color: #0f172a;
}

[data-skin="sketch"] .mid-cta {
  border-width: var(--skin-border-width);
  border-style: solid;
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: calc(var(--radius) * 1.05) calc(var(--radius) * 0.75) calc(var(--radius) * 1.15) calc(var(--radius) * 0.85);
  background-image: none;
}

[data-skin="sketch"] .service-card:nth-child(odd),
[data-skin="sketch"] .benefit-card:nth-child(3n) {
  transform: rotate(-0.4deg);
}

[data-skin="sketch"] .service-card:nth-child(even),
[data-skin="sketch"] .icon-tile:nth-child(2n) {
  transform: rotate(0.35deg);
}

[data-skin="sketch"] body,
[data-skin="sketch"].theme-scope {
  background-image:
    radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 0.7px, transparent 0.7px);
  background-size: 10px 10px;
}

/* --- Playful / kids: мягкие «пузыри», дружелюбная типографика --- */
[data-skin="playful"] {
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-sans: "Nunito", "Fredoka", system-ui, sans-serif;
  --skin-border-width: 2px;
  --skin-shadow: 0 10px 0 color-mix(in srgb, var(--brand-600) 18%, transparent);
  --skin-shadow-brand: 0 8px 0 color-mix(in srgb, var(--brand-700) 35%, transparent);
  --skin-btn-weight: 800;
  --radius: 1.6rem;
}

[data-skin="playful"] h1,
[data-skin="playful"] h2,
[data-skin="playful"] h3 {
  font-weight: 650;
  letter-spacing: -0.01em;
}

[data-skin="playful"] .btn-brand,
[data-skin="playful"] .btn-brand-outline,
[data-skin="playful"] .btn-white-on-brand,
[data-skin="playful"] .form-control-brand {
  border-radius: var(--radius-pill);
  border-width: var(--skin-border-width);
  font-weight: var(--skin-btn-weight);
}

[data-skin="playful"] .btn-brand {
  box-shadow: var(--skin-shadow-brand);
}

[data-skin="playful"] .btn-brand:hover {
  transform: translateY(-2px) scale(1.02);
}

[data-skin="playful"] .service-card,
[data-skin="playful"] .price-card,
[data-skin="playful"] .package-card,
[data-skin="playful"] .benefit-card,
[data-skin="playful"] .icon-tile,
[data-skin="playful"] .step-card,
[data-skin="playful"] .review-card,
[data-skin="playful"] .tariff-card,
[data-skin="playful"] .amenity-item,
[data-skin="playful"] .hero-form-card,
[data-skin="playful"] .hero-inline-form,
[data-skin="playful"] .calc-card,
[data-skin="playful"] .faq-list {
  border-width: var(--skin-border-width);
  border-color: color-mix(in srgb, var(--brand-300) 65%, var(--line));
  box-shadow: var(--skin-shadow);
  border-radius: var(--radius-2xl);
}

[data-skin="playful"] .brand-logo-badge,
[data-skin="playful"] .icon-tile-badge,
[data-skin="playful"] .hero-badge,
[data-skin="playful"] .price-pill,
[data-skin="playful"] .slot-chip {
  border-radius: var(--radius-pill);
}

[data-skin="playful"] body,
[data-skin="playful"].theme-scope {
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--brand-300) 28%, transparent), transparent 28%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--brand-100) 55%, transparent), transparent 26%);
  background-attachment: fixed;
}

[data-skin="playful"] .eyebrow {
  background: var(--brand-100);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
}