/*
 * LolaSigh Noir — design tokens.
 * Единственный источник правды для цвета, типографики, отступов, радиусов
 * и motion во всём проекте. Не дублировать значения в других файлах —
 * ссылаться на переменные отсюда. Подробности: docs/design/lolasigh-noir/.
 */

:root {
  /* ---- Brand pink ---- */
  --lola-pink-50: #fff0f7;
  --lola-pink-100: #ffd6e9;
  --lola-pink-200: #ffadd3;
  --lola-pink-300: #ff85c0;
  --lola-pink-400: #ff66b1;
  --lola-pink-500: #ff4fa3;
  --lola-pink-600: #e83b8e;
  --lola-pink-700: #c72f78;
  --lola-pink-800: #9f285f;
  --lola-pink-900: #762149;

  /* ---- Noir surfaces ---- */
  --noir-950: #0b0b0e;
  --noir-900: #0f0f12;
  --noir-850: #131317;
  --noir-800: #17171c;
  --noir-700: #1f1f26;
  --noir-600: #292932;
  --noir-500: #3a3a45;

  --text-primary: #f5f5f7;
  --text-secondary: #a4a4ae;
  --text-muted: #74747f;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Semantic aliases (used across components/templates) ---- */
  --bg: var(--noir-950);
  --bg-elevated: var(--noir-900);
  --bg-card: var(--noir-850);
  --bg-card-hover: var(--noir-800);
  --bg-input: var(--noir-800);
  --border: var(--border-subtle);
  --text: var(--text-primary);
  --accent: var(--lola-pink-500);
  --accent-strong: var(--lola-pink-600);
  --accent-soft: var(--lola-pink-200);

  /* ---- Glow (единственная техника "объёма" — не box-shadow) ---- */
  --glow-soft: 0 0 24px rgba(255, 79, 163, 0.16), 0 0 48px rgba(255, 79, 163, 0.08);
  --glow-strong: 0 0 32px rgba(255, 79, 163, 0.24), 0 0 64px rgba(255, 79, 163, 0.12);
  --glow-focus: 0 0 0 3px rgba(255, 79, 163, 0.28);

  /* ---- Typography ---- */
  --font-family: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

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

  --text-xs: 0.8125rem;   /* 13px — caption, meta */
  --text-sm: 0.875rem;    /* 14px — secondary body */
  --text-base: 1rem;      /* 16px — body */
  --text-md: 1.125rem;    /* 18px — subheading */
  --text-lg: 1.375rem;    /* 22px — card/section title */
  --text-xl: 1.75rem;     /* 28px — page title */
  --text-2xl: 2.25rem;    /* 36px — section hero title */
  --text-display: clamp(2.25rem, 5.5vw, 4rem); /* hero headline */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Spacing (8pt grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --motion-fast: 160ms;
  --motion-base: 250ms;
  --motion-slow: 420ms;
  --motion-scene: 650ms;
  --ease-lola: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Layout ---- */
  --container-max: 1280px;
}