/* StarToFind — токены дизайна. Все цвета, скругления, тени и шрифты меняются только здесь.
   Раскладка: одна колонка до 1200px, поля 20px, секции разделены воздухом 72–96px. */
:root {
  /* поверхности */
  --bg: #FDFCFC;
  --surface: #F5F3F1;
  --surface-2: #ECE9E5;
  --card: #FFFFFF;

  /* текст */
  --text: #000000;
  --text-2: #3D3A36;
  --muted: #777169;
  --faint: #A59F97;
  --inverse: #000000;
  --on-inverse: #FFFFFF;

  /* бренд: зелёный */
  --brand: #00B67A;
  --brand-hover: #00A56F;
  --brand-press: #009565;
  --brand-tint: #E6F8F1;
  --brand-ink: #00694A;
  --on-brand: #FFFFFF;

  /* рейтинг и состояния */
  --star: #F5B400;
  --star-empty: #E7E2DB;
  --danger: #D92D20;
  --danger-tint: #FDECEA;
  --danger-ink: #B42318;
  --warn-tint: #FFF3D6;
  --warn-ink: #8A5A00;

  /* админка */
  --side: #F8F6F4;                 /* фон бокового меню */
  --hover: rgba(0, 0, 0, .03);     /* наведение на строку */
  --active: rgba(0, 0, 0, .055);   /* выбранный пункт меню */

  /* линии и тени */
  --hair: 1px;
  --line: rgba(0, 0, 0, .075);
  --line-strong: rgba(0, 0, 0, .125);
  --ring: 0 0 0 var(--hair) var(--line-strong), 0 1px 1px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .04);
  --ring-inset: inset 0 0 0 var(--hair) var(--line);
  --ring-focus: 0 0 0 1px rgba(0, 0, 0, .42), 0 1px 1px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .04);
  --ring-danger: 0 0 0 1px var(--danger), 0 1px 1px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .04);
  --shadow-pop: 0 0 1px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .04), 0 6px 16px rgba(0, 0, 0, .06);
  --shadow-sheet: 0 -1px 0 rgba(0, 0, 0, .04), 0 -12px 48px rgba(0, 0, 0, .14);
  --backdrop: rgba(0, 0, 0, .4);
  --backdrop-soft: rgba(20, 18, 16, .16);   /* под панелью записи справа — список остаётся читаемым */

  /* скругления */
  --r-card: 20px;
  --r-inner: 16px;
  --r-sm: 12px;
  --r-xs: 10px;
  --r-pill: 9999px;

  /* шрифты */
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Onest', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* движение */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
}

/* на экранах с высокой плотностью обводка тоньше — как у ElevenLabs */
@media (min-resolution: 2dppx) {
  :root { --hair: .5px; }
}

/* цвет оценки: 1–2 красный, 3 жёлтый, 4–5 зелёный. Элементу с оценкой ставят data-tone="low|mid|high" (rating_tone() в PHP);
   звёзды внутри берут цвет из --stars-on, без data-tone остаются жёлтыми (--star) */
[data-tone="low"]  { --stars-on: var(--danger); }
[data-tone="high"] { --stars-on: var(--brand); }