/* ============================================================
   BOND BEAUTY — Design Tokens (Single Source of Truth)
   Zwei abgestimmte Themes: „Aurora" (light, default) & „Black-Tie" (dark)
   Herkunft der Markenwerte: Gutschein-Projekt (Vabond Beauty/styles.css)
   ============================================================ */

:root {
  /* ---- Brand (mode-unabhängig) ---- */
  --brand-orange: #F39414;
  --brand-purple: #963F95;
  --brand-gold:   #E8C275;

  /* ---- Typografie ---- */
  /* Playfair Display + Inter: volle Latin/Cyrillic/Greek-Abdeckung (RU/UK/EL) */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-hero:    clamp(2.75rem, 1.1rem + 6.2vw, 5.9rem);
  --fs-h2:      clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-lead:    clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --fs-body:    clamp(0.98rem, 0.92rem + 0.25vw, 1.08rem);
  --fs-label:   0.78rem;
  --fs-micro:   0.7rem;

  --lh-tight: 1.04;
  --lh-heading: 1.12;
  --lh-body: 1.65;

  --track-label: 0.22em;
  --track-heading: -0.025em;

  /* ---- Raum (4px-Basis, fluid) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-section: clamp(5rem, 3rem + 9vw, 11rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --container: 1240px;

  /* ---- Form ---- */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.22s;
  --dur-base: 0.55s;
  --dur-slow: 0.9s;
}

/* ============================================================
   THEME: AURORA (Light — Default)
   Cream-Basis, Peach/Rose/Lavender-Mesh, Orange-CTA, Violett-Schatten
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #FFF7F0;
  --bg-mesh-1: rgba(255, 196, 150, 0.55);   /* peach   */
  --bg-mesh-2: rgba(243, 197, 235, 0.5);    /* rose    */
  --bg-mesh-3: rgba(208, 169, 232, 0.42);   /* lavender*/
  --bg-mesh-4: rgba(255, 195, 215, 0.45);   /* pink    */

  --surface: rgba(255, 255, 255, 0.66);
  --surface-strong: rgba(255, 255, 255, 0.85);
  --surface-border: rgba(255, 255, 255, 0.95);

  --text: #2A1A2E;
  --text-muted: #6B5970;
  --text-soft: #93859A;

  --accent: #F39414;               /* CTA-Fläche */
  --accent-ink: #A85E00;           /* Orange als TEXT (kontrastfest) */
  --accent-contrast: #2A1A2E;      /* Text AUF Orange */
  --accent-2: #963F95;

  --hairline: rgba(150, 63, 149, 0.16);
  --hairline-strong: rgba(150, 63, 149, 0.3);

  --shadow-soft: 0 8px 28px rgba(150, 63, 149, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 16px 48px rgba(150, 63, 149, 0.13), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-photo: 0 32px 80px rgba(150, 63, 149, 0.22), 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-cta: 0 10px 30px rgba(243, 148, 20, 0.35);

  --glass-blur: 26px;
  --grain-opacity: 0.05;
  --glow-opacity: 0.55;
}

/* ============================================================
   THEME: BLACK-TIE (Dark)
   Near-Black, Lila→Orange-Glow, Gold-Hairlines, hellerer Akzent
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0C0A0B;
  --bg-mesh-1: rgba(243, 148, 20, 0.13);
  --bg-mesh-2: rgba(150, 63, 149, 0.2);
  --bg-mesh-3: rgba(150, 63, 149, 0.13);
  --bg-mesh-4: rgba(243, 148, 20, 0.08);

  --surface: rgba(255, 245, 235, 0.055);
  --surface-strong: rgba(255, 245, 235, 0.09);
  --surface-border: rgba(232, 194, 117, 0.22);

  --text: #F4EDE6;
  --text-muted: #B5A8AE;
  --text-soft: #82757C;

  --accent: #FFA23D;
  --accent-ink: #FFB35C;
  --accent-contrast: #1E1206;
  --accent-2: #C683C6;

  --hairline: rgba(232, 194, 117, 0.16);
  --hairline-strong: rgba(232, 194, 117, 0.34);

  --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-photo: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 60px rgba(150, 63, 149, 0.25);
  --shadow-cta: 0 10px 32px rgba(255, 162, 61, 0.28);

  --glass-blur: 26px;
  --grain-opacity: 0.07;
  --glow-opacity: 0.8;
}