/* ==========================================================================
   Raffly — дизайн-токены
   Две темы: day (тёплая бумага) и evening (графит, не чёрный).
   Все цвета, отступы, радиусы и тени — только здесь.
   ========================================================================== */

:root {
  /* Палитра — светлая тема (по умолчанию) */
  --bg: #faf8f4;
  --bg-elevated: #fffdfa;
  --surface: #ffffff;
  --surface-2: #f2eee7;
  --surface-3: #e9e3d9;
  --ink: #16181d;
  --ink-soft: #33373f;
  --muted: #5c6373;
  --muted-2: #838a99;
  --line: #e7e1d7;
  --line-strong: #d6cec0;

  --accent: #5b4be6;
  --accent-hover: #4a3ad4;
  --accent-active: #3d2fbd;
  --accent-ink: #ffffff;
  --accent-soft: #ece9ff;
  --accent-line: #cdc6ff;

  --gold: #f0a01a;
  --gold-soft: #fdf0d8;
  --success: #17845c;
  --success-soft: #ddf4e9;
  --danger: #c2413b;
  --danger-soft: #fbe6e4;

  --shadow-sm: 0 1px 2px rgb(22 24 29 / 6%), 0 1px 1px rgb(22 24 29 / 4%);
  --shadow-md: 0 6px 20px -8px rgb(22 24 29 / 16%), 0 2px 6px -2px rgb(22 24 29 / 8%);
  --shadow-lg: 0 30px 60px -30px rgb(22 24 29 / 28%), 0 8px 24px -12px rgb(22 24 29 / 14%);
  --shadow-accent: 0 10px 30px -12px rgb(91 75 230 / 45%);

  /* Геометрия */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Шкала отступов 4px */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Типографика */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.375rem;   /* 22 */
  --text-2xl: 1.75rem;   /* 28 */
  --text-3xl: 2.25rem;   /* 36 */
  --text-4xl: 3rem;      /* 48 */
  --text-5xl: 3.75rem;   /* 60 */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Контейнер и движение */
  --container: 1160px;
  --container-narrow: 760px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --header-h: 68px;

  color-scheme: light;
}

/* Вечерняя тема — тёплый графит, без чистого чёрного и без белого текста */
[data-theme="evening"] {
  --bg: #22262f;
  --bg-elevated: #272c37;
  --surface: #2b303c;
  --surface-2: #333948;
  --surface-3: #3c4355;
  --ink: #ecedf4;
  --ink-soft: #d7dae6;
  --muted: #a5adc0;
  --muted-2: #838b9e;
  --line: #3a4152;
  --line-strong: #4a5266;

  --accent: #8b7bff;
  --accent-hover: #9a8dff;
  --accent-active: #7a68f5;
  --accent-ink: #171a22;
  --accent-soft: #322d4d;
  --accent-line: #4a4173;

  --gold: #ffb84d;
  --gold-soft: #3d3323;
  --success: #3ecf94;
  --success-soft: #213a30;
  --danger: #f0796f;
  --danger-soft: #3d2a29;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-md: 0 8px 24px -12px rgb(0 0 0 / 55%), 0 2px 6px -2px rgb(0 0 0 / 35%);
  --shadow-lg: 0 40px 70px -40px rgb(0 0 0 / 70%), 0 10px 30px -18px rgb(0 0 0 / 50%);
  --shadow-accent: 0 10px 30px -12px rgb(139 123 255 / 45%);

  color-scheme: dark;
}