/* Дизайн-система «Трекер дня»: все значения оформления живут здесь, в переменных. */

/* Шрифт: Manrope (SIL OFL 1.1), хранится в репозитории, ничего не грузится из сети. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- акценты: пара «светлая тема / тёмная тема», контраст проверен скриптом --- */
  --accent-l: #2f6f62;
  --accent-d: #7cc7b3;

  /* --- светлая тема --- */
  --bg: #f6f5f1;
  --surface: #ffffff;
  --glass: color-mix(in srgb, var(--surface) 84%, transparent);
  --text: #1f2421;
  --muted: #5a625d;
  --border: #d9d7cf;
  --accent: var(--accent-l);
  --on-accent: #ffffff;
  --warm: #d08a3a;
  --danger: #a3392f;
  --focus: #1b4fd8;
  --scrim: rgba(20, 28, 24, .45);

  /* --- форма --- */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;

  /* --- отступы --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* --- глубина --- */
  --shadow-1: 0 1px 2px rgba(31, 36, 33, .06), 0 2px 8px rgba(31, 36, 33, .04);
  --shadow-2: 0 6px 18px rgba(31, 36, 33, .16);
  --shadow-3: 0 18px 48px rgba(31, 36, 33, .28);

  /* --- шрифт --- */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .78rem;
  --fs-s: .9rem;
  --fs-m: 1rem;
  --fs-l: 1.15rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;
  --fw-body: 500;
  --fw-strong: 650;
  --fw-head: 750;

  /* --- движение --- */
  --dur-fast: 140ms;
  --dur-med: 260ms;
  --dur-slow: 560ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* --- плотность (меняется атрибутом data-density) --- */
  --row-min: 52px;
  --row-pad: 8px 14px;
  --row-gap: 6px;
  --block-gap: 20px;

  --tabbar-h: 64px;
  color-scheme: light;
}

/* Плотность */
:root[data-density="compact"] { --row-min: 46px; --row-pad: 6px 12px; --row-gap: 4px; --block-gap: 14px; }
:root[data-density="roomy"] { --row-min: 60px; --row-pad: 12px 16px; --row-gap: 10px; --block-gap: 26px; }

/* Акцентные цвета (выбор в «Настройках» и в редакторе). Правила действуют на любом элементе:
   образцы цвета в настройках берут значения отсюда же. */
[data-accent="teal"] { --accent-l: #2f6f62; --accent-d: #7cc7b3; }
[data-accent="blue"] { --accent-l: #2d5fa8; --accent-d: #8db4ee; }
[data-accent="terracotta"] { --accent-l: #a2552b; --accent-d: #eaa27a; }
[data-accent="rose"] { --accent-l: #a8416a; --accent-d: #ee9bb8; }
[data-accent="olive"] { --accent-l: #5d6f1f; --accent-d: #b8cb6a; }
[data-accent="slate"] { --accent-l: #4a5568; --accent-d: #b4bfd0; }

/* Тёмная тема: по системе, если не выбрана светлая… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181a;
    --surface: #1e2325;
    --text: #e8ece9;
    --muted: #a5b0aa;
    --border: #333b3d;
    --accent: var(--accent-d);
    --on-accent: #0f1816;
    --warm: #f0b36a;
    --danger: #f09a90;
    --focus: #8fb0ff;
    --scrim: rgba(0, 0, 0, .55);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, .5);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, .65);
    color-scheme: dark;
  }
}

/* …и принудительно, если выбрана тёмная. */
:root[data-theme="dark"] {
  --bg: #14181a;
  --surface: #1e2325;
  --text: #e8ece9;
  --muted: #a5b0aa;
  --border: #333b3d;
  --accent: var(--accent-d);
  --on-accent: #0f1816;
  --warm: #f0b36a;
  --danger: #f09a90;
  --focus: #8fb0ff;
  --scrim: rgba(0, 0, 0, .55);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .5);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .65);
  color-scheme: dark;
}