/* Valuta — дизайн-система «Ценная бумага».
 * Каждый перевод — документ с защитой, как у банкноты: бумага, тонкая гравировка (гильош),
 * микротекст, серийный номер, голографическая нить. Цвета — печатные краски. */

:root {
  color-scheme: light;

  /* Бумага и краска */
  --paper: #f2efe7;          /* хлопковая бумага — фон */
  --paper-2: #e9e5da;        /* утопленные области */
  --paper-3: #dfdacd;
  --card: #fbfaf6;           /* приподнятый лист */
  --ink: #14161b;            /* основная краска */
  --ink-2: #34363d;
  --muted: #5f6066;          /* вторичный текст, 5:1 на бумаге */
  --faint: #8b8a86;
  --line: rgba(20, 22, 27, 0.14);
  --line-2: rgba(20, 22, 27, 0.08);
  --line-3: rgba(20, 22, 27, 0.24);

  /* Печатные краски */
  --violet: #4a3dc4;         /* фирменная, от valuta.so */
  --violet-2: #3a2fa6;
  --violet-soft: rgba(74, 61, 196, 0.09);
  --teal: #0f7a6c;           /* вторая краска гильоша */
  --teal-soft: rgba(15, 122, 108, 0.1);
  --serial: #c4402a;         /* серийные номера и «ваш ход» */
  --serial-soft: rgba(196, 64, 42, 0.09);

  /* Статусы */
  --ok: #1e7a4f;   --ok-soft: rgba(30, 122, 79, 0.1);
  --wait: #b0560c; --wait-soft: rgba(176, 86, 12, 0.1);
  --bad: #b3302a;  --bad-soft: rgba(179, 48, 42, 0.09);
  --go: var(--violet); --go-soft: var(--violet-soft);

  /* Тёмные вставки (секции «ночной печати») — одинаковы в обеих темах */
  --night: #0f1014;
  --night-2: #17181e;
  --night-ink: #ece9e1;
  --night-muted: #9b9990;
  --night-line: rgba(236, 233, 225, 0.14);

  /* Гильош */
  --g-a: #14161b;
  --g-b: #4a3dc4;
  --g-c: #0f7a6c;

  /* Голограмма */
  --foil: linear-gradient(115deg, #cfc8ff 0%, #a9ecdc 16%, #fff1b5 32%, #ffc9e4 48%, #b8d4ff 64%, #cfc8ff 80%, #a9ecdc 100%);

  /* Шрифты */
  --f-display: "Noto Serif Display", "Noto Serif", Georgia, serif;
  --f-text: Onest, "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", "Noto Sans", ui-monospace, Menlo, monospace;

  /* Шкала набора: дисплей — антиква, узкая и светлая; текст — гротеск */
  --t-hero: clamp(54px, 7.4vw, 124px);
  --t-d1: clamp(44px, 5.6vw, 92px);
  --t-d2: clamp(36px, 4.2vw, 68px);
  --t-d3: clamp(28px, 2.8vw, 44px);
  --t-d4: 28px;
  --t-lead: clamp(17px, 1.35vw, 20px);
  --t-body: 16px;
  --t-sm: 14px;
  --t-xs: 12.5px;
  --t-micro: 10.5px;

  /* Отступы */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 3.4vw, 48px);
  --maxw: 1360px;

  /* Формы */
  --r-xs: 3px; --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(20, 22, 27, 0.04), 0 1px 2px rgba(20, 22, 27, 0.06);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px rgba(20, 22, 27, 0.04), 0 12px 32px -8px rgba(20, 22, 27, 0.14);
  --shadow-3: 0 2px 6px rgba(20, 22, 27, 0.05), 0 30px 80px -20px rgba(20, 22, 27, 0.28);

  /* Движение */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.2, 1.5, 0.4, 1);
  --d-1: 160ms; --d-2: 280ms; --d-3: 560ms; --d-4: 900ms;
}

/* Тёмная тема — «ультрафиолет»: бумага гаснет, защитные волокна и линии светятся */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d0e12;
  --paper-2: #08090c;
  --paper-3: #1c1d24;
  --card: #15161c;
  --ink: #ece9e1;
  --ink-2: #cfccc3;
  --muted: #a3a097;
  --faint: #76746e;
  --line: rgba(236, 233, 225, 0.13);
  --line-2: rgba(236, 233, 225, 0.07);
  --line-3: rgba(236, 233, 225, 0.24);
  --violet: #a197ff;
  --violet-2: #b8b0ff;
  --violet-soft: rgba(161, 151, 255, 0.13);
  --teal: #4fd8bf;
  --teal-soft: rgba(79, 216, 191, 0.12);
  --serial: #ff8063;
  --serial-soft: rgba(255, 128, 99, 0.13);
  --ok: #5fd39a;   --ok-soft: rgba(95, 211, 154, 0.12);
  --wait: #f2a65a; --wait-soft: rgba(242, 166, 90, 0.13);
  --bad: #ff7b73;  --bad-soft: rgba(255, 123, 115, 0.12);
  --night: #050608;
  --night-2: #101116;
  --g-a: #6c6a80;
  --g-b: #8d82ff;
  --g-c: #3ccfb4;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d0e12; --paper-2: #08090c; --paper-3: #1c1d24; --card: #15161c;
    --ink: #ece9e1; --ink-2: #cfccc3; --muted: #a3a097; --faint: #76746e;
    --line: rgba(236, 233, 225, 0.13); --line-2: rgba(236, 233, 225, 0.07); --line-3: rgba(236, 233, 225, 0.24);
    --violet: #a197ff; --violet-2: #b8b0ff; --violet-soft: rgba(161, 151, 255, 0.13);
    --teal: #4fd8bf; --teal-soft: rgba(79, 216, 191, 0.12);
    --serial: #ff8063; --serial-soft: rgba(255, 128, 99, 0.13);
    --ok: #5fd39a; --ok-soft: rgba(95, 211, 154, 0.12);
    --wait: #f2a65a; --wait-soft: rgba(242, 166, 90, 0.13);
    --bad: #ff7b73; --bad-soft: rgba(255, 123, 115, 0.12);
    --night: #050608; --night-2: #101116;
    --g-a: #6c6a80; --g-b: #8d82ff; --g-c: #3ccfb4;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px -12px rgba(0, 0, 0, 0.7);
    --shadow-3: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  }
}