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

:root {
  --cream: #efefed;
  --cream-2: #e8e8e5;
  --cream-3: #dededa;
  --line: #d6d6d2;

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

  /* Палитра построена вокруг #c7fa0b. Чистый лайм слишком светлый, чтобы быть текстом на
     креме (1.3:1), поэтому акцент разведён по ролям: заливка, текст, маркер, кнопка. */
  --lime: #c7fa0b;        /* заливки, графика, акцент на тёмном */
  --lime-2: #c7fa0b;      /* второй стоп градиентов, точки данных */
  --lime-ink: #1e1e1e;      /* акцент как текст и иконка: чёрный (оливковый убран по просьбе Дины) */
  /* Выбранное и маркер — сплошной #C7FA0B: полупрозрачный давал бледно-салатовый (Дина, 2026-10-22). */
  --lime-soft: #c7fa0b;
  /* Кнопка-акцент: заливка лаймом, текст чернилами — 10.9:1 по худшему стопу. */
  --lime-cta: linear-gradient(#c7fa0b, #c7fa0b);

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

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --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(199, 250, 11, .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;
  /* Одна семья на весь продукт — Inter. Иерархия держится на весе и трекинге, не на
     разных гарнитурах: текст 400, подписи 500–600, заголовки 700–800, акценты 600.
     В стопках за Inter стоит системный шрифт платформы: на Apple это SF Pro
     (`-apple-system` и явные имена семейства), на Windows Segoe, на Android Roboto.
     Веб-шрифт может не загрузиться (офлайн, блокировка Google Fonts) — тогда платформа
     отдаёт свой, а не случайный фолбэк браузера. */
  --font: 'Jost', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Jost', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif;
  /* Акцентный текст (подписи-акценты вроде «знакомо?» и «вход») — тот же Inter, но
     полужирный (600) и с плотным трекингом: роль отделяет вес, а не гарнитура.
     Вес, трекинг и интерлиньяж заданы одним правилом в styles.css/app.css, здесь только семья. */
  --font-accent: 'Jost', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    Arial, sans-serif;

  /* ── Стиль по референсу Дины (2026-10-22). ──────────────────────
     Светло-серый фон, карточки — светлая заливка с тонкой лаймовой рамкой, чёрные
     пилюли-кнопки, чёрные секции, одно мягкое лаймовое свечение вместо меш-градиента.
     Шрифт — Jost (SIL OFL: бесплатно и для коммерческого использования, есть кириллица).
     Переменные стекла переопределены здесь, а не вычищены из CSS: все экраны берут их
     отсюда, так что смена стиля — одно место. */
  /* Стиль Phoenix для всего продукта (Дина, 2026-10-22; раньше тут было матовое стекло):
     светло-серый фон, плоские светлые карточки с тонкой серой рамкой, чёрные панели,
     одно мягкое пятно лайма и светлое серое — без тёмных пятен и без зерна.
     Переменные стекла переопределены здесь, поэтому все экраны меняются отсюда. */
  --cream: #ececea;
  --mesh-bg:
    radial-gradient(40% 32% at 85% 8%, rgba(199, 250, 11, .35), transparent 72%),
    radial-gradient(36% 30% at 8% 92%, rgba(199, 250, 11, .22), transparent 72%);
  --glass-bg: #f4f4f1;
  --glass-bg-strong: #f7f7f5;
  --glass-bg-soft: #efefec;
  --glass-brd: #d9d9d5;
  --glass-line: rgba(20, 20, 20, .16);
  --glass-blur: 0px;
  --glass-sat: 1;
  --glass-shadow: 0 0 0 0 transparent;
  --glass-gloss: 0 0 0 0 transparent;
  --lens-face: linear-gradient(transparent, transparent);
  --lens-face-dark: linear-gradient(transparent, transparent);
  --glass-dark-bg: #141414;
  --glass-dark-brd: #141414;
  --glass-dark-gloss: 0 0 0 0 transparent;
  --shadow-sm: 0 0 0 0 transparent;
  --shadow: 0 0 0 0 transparent;
}

/* Знак Lime Planner (Дина, 2026-10-22): срез лайма — чёрный кант, лаймовая мякоть,
   восемь чёрных долек-лучей. Вместо прежней буквы «L» в квадрате; буква остаётся в
   разметке для скринридеров и прячется. Правило лежит здесь, потому что tokens.css
   подключён на всех страницах. */
:root { --logo-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23141414'/%3E%3Ccircle cx='32' cy='32' r='28' fill='%23c7fa0b'/%3E%3Cg stroke='%23141414' stroke-width='4.5' stroke-linecap='round'%3E%3Cline x1='39.4' y1='35.1' x2='51.4' y2='40.0'/%3E%3Cline x1='35.1' y1='39.4' x2='40.0' y2='51.4'/%3E%3Cline x1='28.9' y1='39.4' x2='24.0' y2='51.4'/%3E%3Cline x1='24.6' y1='35.1' x2='12.6' y2='40.0'/%3E%3Cline x1='24.6' y1='28.9' x2='12.6' y2='24.0'/%3E%3Cline x1='28.9' y1='24.6' x2='24.0' y2='12.6'/%3E%3Cline x1='35.1' y1='24.6' x2='40.0' y2='12.6'/%3E%3Cline x1='39.4' y1='28.9' x2='51.4' y2='24.0'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='3.5' fill='%23141414'/%3E%3C/svg%3E"); }
.logo__mark, .brand__mark, .footer .logo__mark {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px;
  border-radius: 50% !important;
  background: var(--logo-mark) center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
}