/**
 * Vata55 Design Tokens — Sweet Cloud
 * Документация: /DESIGN-SYSTEM.md
 * Не редактируйте значения в site.css — меняйте здесь.
 */

:root {
  color-scheme: light;

  /* ─── Примитивы: палитра ─── */
  --v-white: #ffffff;
  --v-cream-50: #fff8ea;
  --v-cream-100: #fff3d9;
  --v-peach-50: #fff1df;
  --v-blush-50: #fff2f6;
  --v-blush-100: #ffeaf2;
  --v-pink-300: #eeb3c7;
  --v-pink-400: #e8a2bd;
  --v-pink-500: #d4739a;
  --v-pink-600: #c7658d;
  --v-pink-accent: #e8437a;
  --v-sky-100: #eaf5ff;
  --v-sky-200: #dceeff;
  --v-sky-300: #bcdaf2;
  --v-mint-100: #e4f4e8;
  --v-gold-400: #e8bd72;
  --v-ink-900: #2d2428;
  --v-ink-500: #7a646e;

  /* ─── Семантика: поверхности и текст ─── */
  --v-surface-page: var(--v-cream-50);
  --v-surface-elevated: var(--v-white);
  --v-surface-blush: var(--v-blush-50);
  --v-surface-sky: var(--v-sky-100);
  --v-surface-mint: var(--v-mint-100);
  --v-surface-header: rgba(255, 248, 245, 0.94);

  --v-text-primary: var(--v-ink-900);
  --v-text-secondary: var(--v-ink-500);
  --v-text-accent: var(--v-pink-500);
  --v-text-on-accent: var(--v-white);
  --v-text-link: var(--v-pink-500);
  --v-text-link-hover: var(--v-pink-400);

  --v-border-subtle: rgba(45, 36, 40, 0.09);
  --v-border-accent: rgba(232, 67, 122, 0.18);
  --v-border-accent-strong: rgba(232, 67, 122, 0.32);
  --v-border-card: rgba(212, 115, 154, 0.13);

  /* ─── Градиенты ─── */
  --v-gradient-primary: linear-gradient(
    135deg,
    var(--v-pink-400) 0%,
    var(--v-pink-500) 58%,
    var(--v-pink-600) 100%
  );
  --v-gradient-primary-hover: linear-gradient(
    135deg,
    #ff7aab 0%,
    #f04d8a 55%,
    var(--v-pink-accent) 100%
  );
  --v-gradient-warm: linear-gradient(
    160deg,
    var(--v-cream-50) 0%,
    var(--v-blush-50) 45%,
    var(--v-sky-100) 100%
  );
  --v-gradient-body: linear-gradient(
    135deg,
    #fff0f7 0%,
    var(--v-sky-100) 48%,
    var(--v-cream-50) 100%
  );
  --v-gradient-heading-underline: linear-gradient(
    90deg,
    var(--v-pink-400) 0%,
    var(--v-gold-400) 100%
  );

  /* ─── Типографика ─── */
  --v-font-body: "Nunito", system-ui, sans-serif;
  --v-font-display: "Fredoka", "Nunito", system-ui, sans-serif;

  --v-text-xs: 0.72rem;
  --v-text-sm: 0.875rem;
  --v-text-base: 1rem;
  --v-text-md: 1.05rem;
  --v-text-lg: 1.12rem;
  --v-text-xl: 1.25rem;
  --v-text-2xl: 1.4rem;
  --v-text-3xl: 1.75rem;
  --v-text-4xl: 2.25rem;
  --v-text-5xl: 2.55rem;

  --v-leading-tight: 1.1;
  --v-leading-snug: 1.35;
  --v-leading-normal: 1.55;
  --v-leading-relaxed: 1.6;

  --v-weight-regular: 400;
  --v-weight-medium: 500;
  --v-weight-semibold: 600;
  --v-weight-bold: 700;
  --v-weight-extrabold: 800;

  --v-tracking-tight: -0.015em;
  --v-tracking-normal: 0;
  --v-tracking-wide: 0.06em;

  /* ─── Отступы (база 4px) ─── */
  --v-space-0: 0;
  --v-space-1: 0.25rem;   /* 4px */
  --v-space-2: 0.5rem;    /* 8px */
  --v-space-3: 0.75rem;   /* 12px */
  --v-space-4: 1rem;      /* 16px */
  --v-space-5: 1.25rem;   /* 20px */
  --v-space-6: 1.5rem;    /* 24px */
  --v-space-7: 1.75rem;   /* 28px */
  --v-space-8: 2rem;      /* 32px */
  --v-space-9: 2.25rem;   /* 36px */
  --v-space-10: 2.5rem;   /* 40px */
  --v-space-12: 3rem;     /* 48px */
  --v-space-16: 4rem;     /* 64px */

  /* ─── Скругления ─── */
  --v-radius-sm: 0.5rem;    /* 8px */
  --v-radius-md: 0.75rem;   /* 12px */
  --v-radius-lg: 1.125rem;  /* 18px — основной для карточек */
  --v-radius-xl: 1.25rem;   /* 20px */
  --v-radius-full: 999px;   /* pill-кнопки */

  /* ─── Тени ─── */
  --v-shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.7);
  --v-shadow-sm: 0 2px 8px rgba(45, 36, 40, 0.04);
  --v-shadow-md: 0 8px 28px rgba(45, 36, 40, 0.07);
  --v-shadow-lg: 0 14px 44px rgba(212, 115, 154, 0.1);
  --v-shadow-accent-sm: 0 4px 18px rgba(232, 67, 122, 0.38);
  --v-shadow-accent-md: 0 10px 28px rgba(232, 67, 122, 0.48);
  --v-shadow-accent-lg: 0 14px 44px rgba(232, 67, 122, 0.2);
  --v-shadow-card-hit: 0 6px 28px rgba(232, 67, 122, 0.14);

  /* ─── Кнопки ─── */
  --v-btn-font: var(--v-font-body);
  --v-btn-weight: var(--v-weight-bold);
  --v-btn-radius: var(--v-radius-full);
  --v-btn-min-height: 2.75rem;
  --v-btn-padding-y: 0.8rem;
  --v-btn-padding-x: 1.35rem;
  --v-btn-font-size: 0.95rem;
  --v-btn-font-size-sm: var(--v-text-sm);
  --v-btn-padding-sm-y: 0.6rem;
  --v-btn-padding-sm-x: 1rem;
  --v-btn-transition: background 0.15s, color 0.15s, box-shadow 0.15s,
    transform 0.12s, border-color 0.15s;

  /* Primary */
  --v-btn-primary-bg: var(--v-gradient-primary);
  --v-btn-primary-bg-hover: var(--v-gradient-primary-hover);
  --v-btn-primary-color: var(--v-text-on-accent);
  --v-btn-primary-shadow: var(--v-shadow-accent-sm);
  --v-btn-primary-shadow-hover: var(--v-shadow-accent-md);

  /* Outline / Secondary */
  --v-btn-outline-bg: var(--v-surface-elevated);
  --v-btn-outline-color: var(--v-text-accent);
  --v-btn-outline-border: 1.5px solid var(--v-border-accent-strong);
  --v-btn-outline-shadow: var(--v-shadow-sm);
  --v-btn-outline-bg-hover: var(--v-blush-100);
  --v-btn-outline-border-hover: rgba(232, 67, 122, 0.5);
  --v-btn-outline-shadow-hover: 0 4px 14px rgba(232, 67, 122, 0.12);

  /* Ghost (на светлом фоне) */
  --v-btn-ghost-bg: transparent;
  --v-btn-ghost-color: var(--v-text-accent);
  --v-btn-ghost-border: 1.5px solid rgba(224, 122, 154, 0.3);
  --v-btn-ghost-bg-hover: var(--v-blush-100);

  /* Ghost (на тёмном / фото-фоне) */
  --v-btn-ghost-dark-bg: rgba(255, 255, 255, 0.12);
  --v-btn-ghost-dark-color: var(--v-white);
  --v-btn-ghost-dark-border: 1.5px solid rgba(255, 255, 255, 0.35);
  --v-btn-ghost-dark-bg-hover: rgba(255, 255, 255, 0.22);

  /* ─── Карточки ─── */
  --v-card-radius: calc(var(--v-radius-lg) + 0.15rem);
  --v-card-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.76) 0%,
    rgba(255, 255, 255, 0.94) 44%
  );
  --v-card-tint-pink: var(--v-blush-100);
  --v-card-tint-sky: var(--v-sky-100);
  --v-card-tint-mint: var(--v-mint-100);
  --v-card-border: 1px solid var(--v-border-card);
  --v-card-shadow: var(--v-shadow-md);
  --v-card-shadow-hover: var(--v-shadow-lg);
  --v-card-border-hover: rgba(232, 67, 122, 0.22);
  --v-card-accent-bar: linear-gradient(
    90deg,
    rgba(232, 162, 189, 0.8) 0%,
    rgba(188, 218, 242, 0.8) 50%,
    rgba(228, 244, 232, 0.9) 100%
  );
  --v-card-badge-bg: rgba(255, 255, 255, 0.86);
  --v-card-badge-color: var(--v-text-accent);

  /* ─── Секции ─── */
  --v-section-padding-y: var(--v-space-9);
  --v-section-soft-bg: linear-gradient(
    180deg,
    var(--v-blush-50) 0%,
    rgba(255, 248, 234, 0.65) 100%
  );
  --v-section-soft-glow-pink: radial-gradient(
    ellipse 90% 80% at 50% 0%,
    rgba(255, 234, 242, 0.68) 0%,
    transparent 70%
  );
  --v-section-soft-glow-sky: radial-gradient(
    ellipse 70% 50% at 100% 12%,
    rgba(220, 238, 255, 0.46) 0%,
    transparent 62%
  );
  --v-section-festive-overlay: rgba(255, 248, 245, 0.55);

  --v-section-video-glow-pink: radial-gradient(
    ellipse 85% 70% at 50% 0%,
    rgba(255, 234, 242, 0.54) 0%,
    transparent 68%
  );
  --v-section-video-glow-sky: radial-gradient(
    ellipse 55% 44% at 100% 80%,
    rgba(220, 238, 255, 0.42) 0%,
    transparent 60%
  );
  --v-section-video-bg: linear-gradient(
    180deg,
    rgba(255, 248, 234, 0.68) 0%,
    var(--v-blush-50) 100%
  );

  --v-section-reviews-glow: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    rgba(255, 240, 244, 0.7) 0%,
    transparent 65%
  );
  --v-section-reviews-bg: linear-gradient(
    180deg,
    var(--v-blush-50) 0%,
    var(--v-cream-50) 100%
  );

  --v-section-programs-glow-pink: radial-gradient(
    ellipse 75% 58% at 12% 6%,
    rgba(255, 234, 242, 0.72) 0%,
    transparent 65%
  );
  --v-section-programs-glow-sky: radial-gradient(
    ellipse 65% 50% at 90% 14%,
    rgba(220, 238, 255, 0.62) 0%,
    transparent 62%
  );
  --v-section-programs-bg: linear-gradient(
    180deg,
    rgba(255, 248, 234, 0.72) 0%,
    rgba(255, 242, 246, 0.78) 100%
  );

  --v-section-play-glow-mint: radial-gradient(
    ellipse 70% 55% at 8% 8%,
    rgba(228, 244, 232, 0.58) 0%,
    transparent 62%
  );
  --v-section-play-glow-pink: radial-gradient(
    ellipse 70% 55% at 92% 92%,
    rgba(255, 234, 242, 0.56) 0%,
    transparent 64%
  );
  --v-section-play-bg: linear-gradient(
    180deg,
    rgba(255, 248, 234, 0.86) 0%,
    rgba(234, 245, 255, 0.46) 100%
  );

  --v-section-order-glow-bottom: radial-gradient(
    ellipse 70% 55% at 50% 100%,
    rgba(255, 220, 233, 0.42) 0%,
    transparent 70%
  );
  --v-section-order-glow-side: radial-gradient(
    ellipse 50% 40% at 0% 50%,
    rgba(220, 238, 255, 0.36) 0%,
    transparent 60%
  );
  --v-section-order-bg: linear-gradient(
    180deg,
    var(--v-blush-50) 0%,
    var(--v-cream-50) 100%
  );

  --v-section-faq-glow: radial-gradient(
    ellipse 70% 55% at 50% 100%,
    rgba(255, 234, 242, 0.45) 0%,
    transparent 65%
  );
  --v-section-faq-bg: linear-gradient(
    180deg,
    var(--v-cream-50) 0%,
    rgba(234, 245, 255, 0.35) 100%
  );

  /* Декоративные фоны (пути к ассетам) */
  --v-bg-magic-sky: url("/images/decor/magic-sky-bg.jpg");
  --v-bg-hero-scene: url("/images/decor/hero-scene-hero.jpg?v=1");
  --v-bg-hero-scene-ground: url("/images/decor/hero-scene-ground.jpg?v=1");

  --v-bg-hero-scene-band: url("/images/decor/hero-scene-band.jpg?v=2");
  /* hero-scene-hero — меньше пустого неба, сцена выше в кадре */
  --v-hero-bg: url("/images/decor/hero-scene-hero.jpg?v=2");
  --v-hero-illustration-overlay: linear-gradient(
    90deg,
    rgba(255, 252, 248, 0.45) 0%,
    transparent 100%
  );
  --v-hero-scene-ratio: calc(747 / 1400);
  --v-hero-panel-bg: rgba(255, 251, 248, 0.88);
  --v-hero-panel-border: 1px solid rgba(255, 255, 255, 0.92);
  --v-hero-panel-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 40px rgba(42, 36, 48, 0.07);
  --v-hero-fade-bottom: linear-gradient(
    180deg,
    transparent 0%,
    var(--v-cream-50) 100%
  );

  /* ─── Highlights ─── */
  --v-highlights-bg: var(--v-cream-50);
  --v-highlights-padding-y: var(--v-space-5);
  --v-highlights-gap: var(--v-space-2);
  --v-highlights-gap-desktop: var(--v-space-3);
  --v-highlights-item-bg: rgba(255, 255, 255, 0.94);
  --v-highlights-item-border: var(--v-border-accent);
  --v-highlights-item-shadow: 0 6px 20px rgba(232, 67, 122, 0.1);
  --v-highlights-item-radius: var(--v-radius-md);
  --v-highlights-icon-bg: linear-gradient(
    135deg,
    var(--v-blush-100) 0%,
    var(--v-cream-100) 100%
  );
  --v-highlights-icon-border: var(--v-border-accent);
  --v-highlights-icon-color: var(--v-text-accent);

  /* ─── Cloud divider ─── */
  --v-divider-height: 2.5rem;
  --v-divider-scallop: var(--v-cream-50);
  --v-divider-fade: var(--v-blush-50);

  /* ─── Форма заказа ─── */
  --v-form-bg: rgba(255, 255, 255, 0.96);
  --v-form-radius: var(--v-card-radius);
  --v-form-border: 1px solid var(--v-border-accent);
  --v-form-shadow: 0 16px 48px rgba(232, 67, 122, 0.14), var(--v-shadow-sm);
  --v-input-bg: var(--v-cream-50);
  --v-input-bg-focus: var(--v-white);
  --v-input-border: 1px solid var(--v-border-accent);
  --v-input-border-focus: var(--v-pink-500);
  --v-input-focus-ring: 0 0 0 3px rgba(212, 115, 154, 0.15);

  /* ─── Layout ─── */
  --v-header-height: 4rem;
  --v-sticky-cta-height: calc(3.1rem + env(safe-area-inset-bottom, 0px));
  --v-container-max: 1080px;
  --v-container-gutter: 2rem;

  /* ─── Алиасы для постепенной миграции site.css ─── */
  /* Удалите дубли из site.css :root на шаге 2+ */
  --gold: var(--v-gold-400);
  --gold-light: var(--v-cream-100);
  --coral: var(--v-pink-300);
  --pink: var(--v-pink-400);
  --pink-dark: var(--v-pink-500);
  --pink-light: var(--v-blush-100);
  --blush: var(--v-blush-50);
  --peach: var(--v-peach-50);
  --cream: var(--v-cream-50);
  --sky: var(--v-sky-200);
  --sky-deep: var(--v-sky-300);
  --mint: var(--v-mint-100);
  --text: var(--v-text-primary);
  --muted: var(--v-text-secondary);
  --line: var(--v-border-subtle);
  --white: var(--v-white);
  --page: var(--v-surface-page);
  --radius: var(--v-radius-lg);
  --shadow: var(--v-shadow-lg);
  --shadow-warm: var(--v-shadow-md);
  --gradient-primary: var(--v-gradient-primary);
  --gradient-warm: var(--v-gradient-warm);
  --header: var(--v-header-height);
  --sticky: var(--v-sticky-cta-height);
}