/*
Theme Name: Melodic Songs
Theme URI: https://melodicsongs.example
Author: Melodic Songs
Author URI: https://melodicsongs.example
Description: Одностраничная тема WordPress для лендинга "Melodic Songs" — песня на заказ по вашей истории. Тема воссоздаёт статический дизайн 1:1: секции Hero, примеры песен с плеером, цена, процесс, о нас, отзывы и квиз подбора песни.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: All Rights Reserved
License URI: https://melodicsongs.example/license
Text Domain: melodic-songs
Tags: one-page, custom-menu, custom-logo, translation-ready

Melodic Songs WordPress Theme, converted 1:1 from the original static landing page.
Design tokens below (colors, spacing, type scale) are preserved verbatim from the
original style.css of the static site and are enqueued by functions.php alongside
base.css and components.css.
*/

/* ============================================================
   MELODIC SONGS — design tokens
   Palette: burgundy / white — alternating light & deep sections
   Display: Boska · Body: Switzer
   ============================================================ */

:root,
[data-theme='light'] {
  /* ---- Surfaces (light, airy) ---- */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #fbf5f4;
  --color-surface-offset: #f7e9e8;
  --color-surface-offset-2: #f0d9d9;
  --color-surface-dynamic: #e8c7c8;
  --color-divider: #ecdcdb;
  --color-border: #e0c4c4;

  /* ---- Inverse surfaces (soft burgundy sections, light not dark) ---- */
  --color-bg-inverse: #f3d9dd;
  --color-surface-inverse: #fbeeef;
  --color-surface-inverse-2: #efc9cf;
  --color-border-inverse: #e3aab3;

  /* ---- Text ---- */
  --color-text: #34131a;
  --color-text-muted: #8a5b62;
  --color-text-faint: #c9a3a7;
  --color-text-inverse: #4a0f1f;
  --color-text-inverse-muted: #7a3d47;

  /* ---- Primary accent: true burgundy ---- */
  --color-primary: #7a1830;
  --color-primary-hover: #641226;
  --color-primary-active: #500e1e;
  --color-primary-highlight: #f3d7dc;

  /* ---- Secondary accent: warm gold ---- */
  --color-peach: #cc8a3f;
  --color-peach-hover: #b3762f;
  --color-peach-highlight: #f6e6cd;

  /* ---- Deep burgundy (headings/dark accents) ---- */
  --color-plum: #5c1023;
  --color-plum-hover: #430a19;

  /* ---- Semantic ---- */
  --color-success: #6f9564;
  --color-success-highlight: #e1ead9;
  --color-error: #c15b5b;
  --color-error-highlight: #f6dede;
  --color-warning: #c78a3e;
  --color-warning-highlight: #f3e3c9;

  /* ---- Radius ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-golden: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Shadows (warm-toned) ---- */
  --shadow-sm: 0 1px 3px oklch(0.35 0.06 350 / 0.08);
  --shadow-md: 0 8px 24px oklch(0.35 0.06 350 / 0.10);
  --shadow-lg: 0 20px 48px oklch(0.35 0.06 350 / 0.16);
  --shadow-glow: 0 0 0 1px oklch(0.7 0.1 40 / 0.15), 0 12px 40px oklch(0.62 0.14 30 / 0.22);

  /* ---- Content widths ---- */
  --content-narrow: 640px;
  --content-default: 1000px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* ---- Price section fade colors ---- */
  --price-fade-top: #f3d9dd;
  --price-fade-bottom: #f3d9dd;

  /* ---- Fonts ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --font-lede: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

/* ---- Dark mode ---- */
[data-theme='dark'] {
  --color-bg: #231820;
  --color-surface: #2c1e28;
  --color-surface-2: #33222e;
  --color-surface-offset: #3a2732;
  --color-surface-offset-2: #452e3b;
  --color-surface-dynamic: #503544;
  --color-divider: #4a323f;
  --color-border: #5a3d4b;

  --color-bg-inverse: #231820;
  --color-surface-inverse: #2c1e28;
  --color-surface-inverse-2: #33222e;
  --color-border-inverse: #4a323f;

  --color-text: #f5e6e9;
  --color-text-muted: #cba9b3;
  --color-text-faint: #8f6f7a;
  --color-text-inverse: #fff5f3;
  --color-text-inverse-muted: #e8b8c0;

  --color-primary: #e792a6;
  --color-primary-hover: #edabbb;
  --color-primary-active: #f2c1cd;
  --color-primary-highlight: #4a2f3a;

  --color-peach: #f2b285;
  --color-peach-hover: #f5c39f;
  --color-peach-highlight: #4a3627;

  --color-plum: #f0d9e6;
  --color-plum-hover: #f7e9f0;

  --color-success: #9cc48c;
  --color-success-highlight: #33422c;
  --color-error: #e08a8a;
  --color-error-highlight: #4a2e2e;
  --color-warning: #e0b46f;
  --color-warning-highlight: #47381f;

  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25);
  --shadow-md: 0 8px 24px oklch(0 0 0 / 0.32);
  --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.42);
  --shadow-glow: 0 0 0 1px oklch(0.7 0.1 40 / 0.2), 0 12px 40px oklch(0.3 0.1 340 / 0.4);

  --price-fade-top: #231820;
  --price-fade-bottom: #231820;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #231820;
    --color-surface: #2c1e28;
    --color-surface-2: #33222e;
    --color-surface-offset: #3a2732;
    --color-surface-offset-2: #452e3b;
    --color-surface-dynamic: #503544;
    --color-divider: #4a323f;
    --color-border: #5a3d4b;
    --color-bg-inverse: #231820;
    --color-surface-inverse: #2c1e28;
    --color-surface-inverse-2: #33222e;
    --color-border-inverse: #4a323f;
    --color-text: #f5e6e9;
    --color-text-muted: #cba9b3;
    --color-text-faint: #8f6f7a;
    --color-text-inverse: #fff5f3;
    --color-text-inverse-muted: #e8b8c0;
    --color-primary: #e792a6;
    --color-primary-hover: #edabbb;
    --color-primary-active: #f2c1cd;
    --color-primary-highlight: #4a2f3a;
    --color-peach: #f2b285;
    --color-peach-hover: #f5c39f;
    --color-peach-highlight: #4a3627;
    --color-plum: #f0d9e6;
    --color-plum-hover: #f7e9f0;
    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25);
    --shadow-md: 0 8px 24px oklch(0 0 0 / 0.32);
    --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.42);

    --price-fade-top: #231820;
    --price-fade-bottom: #231820;
  }
}

/* ---- Type scale ---- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}