/* ============================================================
   Kaizen — дизайн-токены (общие для лендинга и приложения).
   Подключается первым: styles.css (лендинг) и app/app.css (приложение)
   только используют эти переменные.
   ============================================================ */

:root {
  --cream: #f6f5f4;
  --cream-2: #f1f0ee;
  --cream-3: #e8e4e2;
  --line: #ded8d3;

  --ink: #1e1e1e;
  --ink-soft: #3d3d3d;
  /* Вторичный текст контрастнее прежнего: он стоит не только на кремовом фоне, но и на
     цветной подложке (--mesh-bg), где #6b6560 давал 3.1:1 вместо 4.5:1. */
  --muted: #544e49;

  /* Палитра построена вокруг #c7fa0b. Чистый лайм слишком светлый, чтобы быть текстом на
     креме (1.3:1), поэтому акцент разведён по ролям: заливка, текст, маркер, кнопка. */
  --lime: #c7fa0b;        /* заливки, графика, акцент на тёмном */
  --lime-2: #a3db00;      /* второй стоп градиентов, точки данных */
  --lime-ink: #4f6b00;    /* акцент как текст и иконка на светлом: 5.6:1 на креме */
  --lime-soft: rgba(199, 250, 11, .45); /* маркер-подложка под текстом */
  /* Кнопка-акцент: заливка лаймом, текст чернилами — 10.9:1 по худшему стопу. */
  --lime-cta: linear-gradient(135deg, #d9ff4d 0%, #a8e200 100%);

  --orange: #ef7b16;
  --red: #ff2f2f;
  /* Успех уведён в бирюзу: зелёный рядом с лаймом читался как ошибка палитры. */
  --green: #1b8f7a;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --shadow-sm: 0 2px 8px rgba(30, 30, 30, .06);
  --shadow: 0 14px 40px rgba(30, 30, 30, .09);
  --shadow-lg: 0 30px 70px rgba(30, 30, 30, .16);

  /* Стекло (Liquid Glass): панель поверх цветной подложки. Без подложки
     backdrop-filter размывает ровный крем, и стекло выглядит серым прямоугольником —
     поэтому --mesh-bg и стеклянные поверхности ходят парой. */
  --mesh-bg:
    radial-gradient(46% 38% at 14% 6%, rgba(199, 250, 11, .45), transparent 72%),
    radial-gradient(38% 32% at 88% 4%, rgba(240, 228, 96, .42), transparent 72%),
    radial-gradient(50% 44% at 50% 34%, rgba(199, 250, 11, .3), transparent 74%),
    radial-gradient(44% 40% at 92% 72%, rgba(108, 140, 190, .34), transparent 72%),
    radial-gradient(34% 30% at 6% 86%, rgba(163, 219, 0, .32), transparent 74%);

  --glass-bg: rgba(255, 255, 255, .66);
  --glass-bg-strong: rgba(255, 255, 255, .78);
  --glass-bg-soft: rgba(255, 255, 255, .34);
  --glass-brd: rgba(255, 255, 255, .62);
  --glass-line: rgba(30, 30, 30, .14);
  --glass-blur: 18px;
  --glass-sat: 1.5;
  --glass-shadow: 0 18px 44px rgba(30, 30, 30, .12);

  /* Линза. Одна полупрозрачная плёнка читается как серая заливка; объём дают блики по
     канту (свет сверху, ответный снизу, встречные в углах) и тёмный кант внутри —
     он и есть «толщина стекла», без него белая плашка на белой панели исчезает.
     Пропорции подобраны на живом экране: слабее — пилюля сливается с панелью. */
  --glass-gloss:
    inset 0 2px 1px -1px rgba(255, 255, 255, .95),
    inset 0 -1px 1px -1px rgba(255, 255, 255, .75),
    inset 2px -2px 1px -1px rgba(255, 255, 255, .55),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .55),
    inset 0 0 10px rgba(30, 30, 30, .3);

  /* Отблеск — два встречных сгустка света по углам, а не полоса через всю грань:
     полоса в процентах на панели шириной 1150px засвечивала половину стекла, а на
     пилюле 120px была еле видна. Доли от размера дают один и тот же вид и там, и там.
     Слоем фона, а не псевдоэлементом: фон не надо блюрить (мягкость даёт сам
     градиент), нечего обрезать `contain`/`overflow`, и он есть у любой плашки. */
  --lens-face:
    radial-gradient(38% 62% at 0% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 72%),
    radial-gradient(38% 62% at 100% 100%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 72%);
  --lens-face-dark:
    radial-gradient(38% 62% at 0% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 72%),
    radial-gradient(38% 62% at 100% 100%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 72%);

  --glass-face: var(--lens-face), var(--glass-bg);
  --glass-face-strong: var(--lens-face), var(--glass-bg-strong);
  --glass-face-soft: var(--lens-face), var(--glass-bg-soft);

  /* Тёмная панель на светлом фоне: та же стеклянная логика, но текст светлый,
     поэтому плотность выше — контраст важнее прозрачности. */
  --glass-dark-bg: rgba(20, 24, 18, .88);
  --glass-dark-brd: rgba(246, 245, 244, .16);
  --glass-dark-gloss:
    inset 0 2px 1px -1px rgba(255, 255, 255, .3),
    inset 0 -1px 1px -1px rgba(255, 255, 255, .22),
    inset 2px -2px 1px -1px rgba(255, 255, 255, .18),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .18),
    inset 0 0 10px rgba(0, 0, 0, .35);
  --glass-face-dark: var(--lens-face-dark), var(--glass-dark-bg);

  --container: 1160px;
  --font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;
}