/* ============================================================
   W MUSIC LAB — Design Tokens
   Dark luxury + warm gold accent
   ============================================================ */

:root {
  /* ---- Surfaces (тёмная база под чёрно-белый логотип) ---- */
  --color-bg: #0a0a0b;
  --color-bg-elevated: #121214;
  --color-surface: #16161a;
  --color-surface-2: #1d1d22;
  --color-surface-hover: #232329;
  --color-line: rgba(255, 255, 255, 0.09);
  --color-line-strong: rgba(255, 255, 255, 0.16);

  /* ---- Text ---- */
  --color-text: #f6f4ef;
  --color-text-muted: #b9b5ab;
  --color-text-dim: #a8a294;
  --color-text-on-accent: #0a0a0b;

  /* ---- Accent: warm amber gold ---- */
  --color-accent: #e8b341;
  --color-accent-hot: #f5c451;
  --color-accent-deep: #b8842a;
  --color-accent-soft: rgba(232, 179, 65, 0.12);
  --color-accent-glow: rgba(232, 179, 65, 0.35);

  /* ---- Secondary tint (cool, для контраста на бенто) ---- */
  --color-tint: #c5d0e6;

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, #f5c451 0%, #e8b341 45%, #b8842a 100%);
  --grad-text: linear-gradient(180deg, #ffffff 0%, #cfc8b8 100%);
  --grad-surface: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  --grad-hero-fade: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.55) 55%, rgba(10,10,11,1) 100%);

  /* ---- Typography ---- */
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  --text-hero: clamp(2.5rem, 1.1rem + 6vw, 7.5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;

  /* ---- Spacing ---- */
  --space-section: clamp(3rem, 2rem + 3vw, 5.5rem);
  --space-block: clamp(2rem, 1.4rem + 2.5vw, 4rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --gap-grid: clamp(1rem, 0.8rem + 0.9vw, 1.75rem);
  --container: 1320px;
  --container-narrow: 920px;

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 12px 40px rgba(232, 179, 65, 0.28);

  /* ---- Motion ---- */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layout ---- */
  --header-h: 76px;
}