/* Тема «Графит» — по шаблону Batyr (skin-graphite): тёмная и светлая.
   Палитра, шрифт Inter, метрик-карточки с цветной кромкой, иконкой и шкалой-тиками,
   сегменты на «треке». Тема «Стена» (app.css) не меняется. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  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[data-theme="graphite"] {
  color-scheme: dark;
  --bg: #1e1e1e;
  --surface: #242424;
  --surface-2: #2a2a2a;
  --inner: #202020;
  --track: #1a1a1a;
  --line: rgb(255 255 255 / 7%);
  --line-2: rgb(255 255 255 / 12%);
  --text: #ececec;
  --text-2: #a3a6ab;
  --text-3: #8b8e94;
  --accent: #00c1ad;
  --accent-on: #05231f;
  --accent-press: #00a897;
  --accent-ink: #00c1ad;
  --accent-soft: rgb(0 193 173 / 12%);
  --accent-soft-2: rgb(0 193 173 / 20%);
  --accent-line: rgb(0 193 173 / 34%);
  --pos: #6fd6a6;
  --pos-line: rgb(111 214 166 / 30%);
  --neg: #f19494;
  --star: #f2b33d;
  --derived: #e7c36d;
  --selection: rgb(0 193 173 / 30%);
  --bar-bg: rgb(27 27 27 / 96%);
  --bg-clear: rgb(30 30 30 / 0%);
  --toast-action-bg: rgb(0 193 173 / 14%);
  --shadow: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 2px 6px rgb(0 0 0 / 28%);
  --shadow-tile: 0 10px 24px rgb(0 0 0 / 40%);
  --shadow-pop: 0 18px 48px rgb(0 0 0 / 45%), 0 2px 6px rgb(0 0 0 / 30%);
  --plate: linear-gradient(150deg, #383838, #303030);
  --plate-edge: rgb(255 255 255 / 3.5%);
  --plate-ink: #cccccc;
  --tick-off: #404241;
  /* Акценты метрик (RGB для свечения кромки) */
  --m-teal: 34 196 178;
  --m-amber: 255 167 22;
  --m-violet: 138 142 255;
  --m-cyan: 33 189 239;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

:root[data-theme="graphite-light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --inner: #fafafa;
  --track: #f2f3f5;
  --line: #e7ebee;
  --line-2: #dce2e6;
  --text: #12171e;
  --text-2: #555b61;
  --text-3: #686d72;
  --accent: #00c1ad;
  --accent-on: #05231f;
  --accent-press: #00ad9b;
  --accent-ink: #00796c; /* бирюза для текста на белом: 4,5:1 */
  --accent-soft: rgb(0 193 173 / 10%);
  --accent-soft-2: rgb(0 193 173 / 18%);
  --accent-line: rgb(0 143 128 / 32%);
  --pos: #206f4b;
  --pos-line: #cce8d8;
  --neg: #9c4545;
  --star: #e0a12a;
  --derived: #775b19;
  --selection: rgb(0 193 173 / 22%);
  --bar-bg: rgb(240 242 244 / 96%);
  --bg-clear: rgb(244 246 248 / 0%);
  --toast-action-bg: rgb(0 193 173 / 14%);
  --shadow: 0 1px 1px rgb(35 47 58 / 5%);
  --shadow-tile: 0 6px 18px rgb(29 43 60 / 14%);
  --shadow-pop: 0 6px 24px rgb(29 43 60 / 13%), 0 1px 2px rgb(29 43 60 / 5%);
  --plate: #ffffff;
  --plate-edge: rgb(239 240 241 / 63%);
  --plate-ink: #111719;
  --tick-off: #dee3e8;
  --m-teal: 108 205 165;
  --m-amber: 224 161 42;
  --m-violet: 157 134 238;
  --m-cyan: 63 141 230;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ——— Общая форма блоков Графита ——— */

:root[data-theme^="graphite"] body {
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -0.005em;
}

:root[data-theme^="graphite"] .appbar-title { font-weight: 600; letter-spacing: -0.015em; }
:root[data-theme^="graphite"] .hero-price { font-weight: 600; letter-spacing: -0.035em; }

/* Поверхности: панель с тонкой рамкой и мягкой тенью */
:root[data-theme^="graphite"] :is(.list, .disclosure, .search, .was-box) {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
:root[data-theme^="graphite"] .list { border-radius: 12px; }
:root[data-theme^="graphite"] .disclosure { border-radius: 12px; }
:root[data-theme^="graphite"] .row + .row { box-shadow: inset 0 1px 0 var(--line); }
:root[data-theme^="graphite"] .row:focus-within { background: var(--surface-2); }
:root[data-theme^="graphite"] .group-title { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-3); }
:root[data-theme^="graphite"] .disclosure-head .group-title { font-size: 15px; letter-spacing: 0; }

/* Поля ставок — на «вкладке» с рамкой, фокус бирюзой */
:root[data-theme^="graphite"] .field input {
  background: var(--inner);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
:root[data-theme^="graphite"] .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Кнопки: основная — бирюза с тёмными чернилами, вторичная — панель с рамкой */
:root[data-theme^="graphite"] .btn { border-radius: 10px; font-weight: 600; }
:root[data-theme^="graphite"] .btn-primary { box-shadow: 0 1px 2px rgb(0 0 0 / 22%); }
:root[data-theme^="graphite"] .btn-primary:disabled { box-shadow: none; border: 1px solid var(--line-2); }
:root[data-theme^="graphite"] .btn-quiet { background: var(--surface-2); border: 1px solid var(--line-2); }
:root[data-theme^="graphite"] .revert-btn { border: 1px solid var(--accent-line); border-radius: 8px; }
:root[data-theme^="graphite"] .new-btn { border-radius: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / 22%); }
:root[data-theme^="graphite"] .theme-pop { border-color: var(--line-2); }

/* Сегменты (срок поставки, переключатель темы) — трек и выбранная «клавиша» */
:root[data-theme^="graphite"] .day-chips {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--track);
}
:root[data-theme^="graphite"] .day-chip { min-height: 36px; border-radius: 7px; background: transparent; color: var(--text-3); }
:root[data-theme^="graphite"] .day-chip[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow); }
:root[data-theme="graphite-light"] .day-chip[aria-pressed="true"] { background: #fff; }

/* ——— Метрик-карточки: кромка-свечение из угла, иконка, шкала-тики ——— */

:root[data-theme^="graphite"] .chip {
  --card-rgb: var(--m-teal);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
:root[data-theme^="graphite"] .chip::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgb(var(--card-rgb) / 72%);
  border-radius: inherit;
  background: radial-gradient(ellipse at right top, rgb(var(--card-rgb) / 9%), transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 155px 130px at right top, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 155px 130px at right top, #000 20%, transparent 100%);
}
:root[data-theme="graphite-light"] .chip::before { border-color: rgb(var(--card-rgb) / 55%); }
:root[data-theme^="graphite"] .chip-total { --card-rgb: var(--m-teal); box-shadow: var(--shadow); }
:root[data-theme^="graphite"] .chip:has([data-meter="profit1"]) { --card-rgb: var(--m-amber); }
:root[data-theme^="graphite"] .chip:has([data-meter="profit2"]) { --card-rgb: var(--m-cyan); }
:root[data-theme^="graphite"] .chip:has([data-meter="margin"]) { --card-rgb: var(--m-violet); }
:root[data-theme^="graphite"] .chip-annual { --card-rgb: var(--m-teal); background: var(--surface); }
:root[data-theme^="graphite"] .chip-label { padding-right: 30px; color: var(--text-2); }
:root[data-theme^="graphite"] .chip-value { font-weight: 620; letter-spacing: -0.03em; font-size: 20px; }
:root[data-theme^="graphite"] .chip-total .chip-value { font-size: 25px; color: var(--text); }
:root[data-theme^="graphite"] .chip-annual .chip-value { color: var(--text); }
:root[data-theme^="graphite"] .chip-total { flex-wrap: wrap; align-items: flex-start; row-gap: 0; }
:root[data-theme^="graphite"] .chip-total .chip-main { flex: 1 1 auto; }
:root[data-theme^="graphite"] .chip-total .was-box { margin-top: 26px; }

:root[data-theme^="graphite"] .m-icon {
  position: absolute;
  top: 11px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  color: var(--plate-ink);
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 2%), 0 2px 4px rgb(0 0 0 / 8%);
}
:root[data-theme^="graphite"] .m-icon svg { width: 15px; height: 15px; }
:root[data-theme^="graphite"] .meter {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 8px;
  margin-top: 6px;
}
:root[data-theme^="graphite"] .meter > i {
  flex: 1 1 0;
  min-width: 1px;
  background: var(--tick-off);
  transition: background-color 160ms ease-out;
}
:root[data-theme^="graphite"] .meter > i.is-lit { background: rgb(var(--card-rgb)); }

/* ——— Остальное ——— */

:root[data-theme^="graphite"] .was-box { background: var(--inner); border-radius: 10px; }
:root[data-theme^="graphite"] .was-label { color: var(--text-3); }
:root[data-theme^="graphite"] .tabbar { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme^="graphite"] .tab[aria-current="page"] { color: var(--accent-ink); }
:root[data-theme^="graphite"] .toast { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); }
:root[data-theme^="graphite"] .toast-action { color: var(--accent-ink); }
:root[data-theme^="graphite"] .calc-card { border-radius: 12px; box-shadow: var(--shadow); }
:root[data-theme^="graphite"] .cc-pill { border-radius: 6px; background: var(--inner); }
:root[data-theme^="graphite"] .seg-vat { background: #6b7079; }
:root[data-theme="graphite-light"] .seg-vat { background: #b9c0c8; }
:root[data-theme="graphite-light"] .cover { background: var(--bg); }
:root[data-theme="graphite-light"] .search input::-webkit-search-cancel-button { filter: none; }

@media (hover: hover) and (pointer: fine) {
  :root[data-theme^="graphite"] .btn-quiet:hover:not(:disabled) { border-color: var(--text-3); background: var(--surface-2); }
  :root[data-theme^="graphite"] .day-chip:hover:not([aria-pressed="true"]) { background: transparent; color: var(--text); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme^="graphite"] .meter > i { transition: none; }
}