/* So Cold — дизайн-код (по карточке «активация изделия»).
   Основной шрифт: MedeoSans-Thin (файл в чате клиента). Пока его нет — Inter Tight 200 как временная замена.
   Когда файл появится: положить в brand/fonts/MedeoSans-Thin.ttf — @font-face ниже подхватит. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300;400&family=JetBrains+Mono:wght@300;400&display=swap");

@font-face {
  font-family: "Medeo Sans";
  src: url("./fonts/MedeoSans-Thin.ttf") format("truetype");
  font-weight: 100 300;
  font-display: swap;
}

:root {
  /* бумага: светло-серая с мягким холодным градиентом */
  --sc-paper: #e9e9e7;
  --sc-paper-2: #dcdcda;
  --sc-paper-hi: #f4f4f2;
  --sc-ink: #1d1d1c;
  --sc-ink-2: #4a4a48;
  --sc-ink-3: #7c7c79;
  --sc-line: rgba(29, 29, 28, .22);
  --sc-line-soft: rgba(29, 29, 28, .12);
  --sc-ice: #cfd6da;          /* холодный акцент, очень сдержанно */
  --sc-silver: #b9bcbd;

  --sc-font-display: "Medeo Sans", "Inter Tight", system-ui, sans-serif;
  --sc-font-text: "Inter Tight", system-ui, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --sc-w-display: 200;
  --sc-track-display: -0.02em;
  --sc-track-mono: 0.02em;

  --sc-radius-pill: 999px;
  --sc-hair: 1px;
  --sc-gutter: clamp(16px, 4vw, 48px);
  --sc-ease: cubic-bezier(.22, .61, .36, 1);

  --sc-paper-grad: radial-gradient(120% 90% at 30% 10%, var(--sc-paper-hi) 0%, var(--sc-paper) 45%, var(--sc-paper-2) 100%);
}

/* базовые примитивы */
.sc-display { font-family: var(--sc-font-display); font-weight: var(--sc-w-display); letter-spacing: var(--sc-track-display); text-transform: lowercase; line-height: .95; color: var(--sc-ink); }
.sc-mono    { font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: var(--sc-track-mono); color: var(--sc-ink); text-transform: lowercase; }
.sc-text    { font-family: var(--sc-font-text); font-weight: 300; font-size: 15px; line-height: 1.45; color: var(--sc-ink-2); }
.sc-pill    { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: var(--sc-hair) solid var(--sc-line); border-radius: var(--sc-radius-pill); font: 300 12px/1 var(--sc-font-text); color: var(--sc-ink-2); background: transparent; }
.sc-rule    { height: 0; border: 0; border-top: var(--sc-hair) solid var(--sc-line); margin: 0; }
.sc-bracket::before { content: "[ "; } .sc-bracket::after { content: " ]"; }
.sc-mark::before { content: "✣ "; }