/* ============================================================
   LimenPay — токены оформления
   Источник правды: desktop-staging-2026-07-27/design-tokens.json
   ($name "LimenPay Design System tokens", $version 1.0, Figma)
   Правка руками здесь — временная мера; при следующем экспорте
   из Figma этот файл пересобирается из JSON, а не дописывается.
   ============================================================ */

:root{
  /* ── примитивы: терракота ── */
  --terracotta-50:#FBF2EF;  --terracotta-100:#F6E0D9; --terracotta-200:#EBC0B3;
  --terracotta-300:#DE9C89; --terracotta-400:#C97260; --terracotta-500:#B04430;
  --terracotta-600:#953728; --terracotta-700:#7A2C20; --terracotta-800:#5E221A;
  --terracotta-900:#421813;

  /* ── примитивы: navy ── */
  --navy-50:#EEF0F4;  --navy-100:#D6DBE4; --navy-200:#AEB7C7; --navy-300:#8592A9;
  --navy-400:#5C6B87; --navy-500:#3B4B69; --navy-600:#2A3855; --navy-700:#1F2D47;
  --navy-800:#172238; --navy-900:#0E1523;

  /* ── примитивы: бумага ── */
  --paper-50:#FFFCF6;  --paper-100:#FAF5E9; --paper-200:#F7F1E3; --paper-300:#EFE7D5;
  --paper-400:#E3D9C4; --paper-500:#CFC3AB; --paper-600:#A99C84; --paper-700:#7D7261;

  /* ── примитивы: статусы ── */
  --green-50:#EDF6F0; --green-300:#7FBF9C; --green-500:#2F7D5B; --green-700:#1D5340;
  --amber-50:#FDF6E7; --amber-300:#E5B764; --amber-500:#C4831F; --amber-700:#8A5A12;
  --red-50:#FAECEA;   --red-300:#CE8078;   --red-500:#A32020;   --red-700:#741616;
  --blue-50:#EBF3F8;  --blue-300:#7FAAC4;  --blue-500:#2E6B8F;  --blue-700:#1D4761;

  /* ── семантика: фон ── */
  --bg-canvas:var(--paper-200);
  --bg-surface:var(--paper-50);
  --bg-raised:#FFFFFF;
  --bg-subtle:var(--paper-300);
  --bg-inverse:var(--navy-700);
  --bg-grid:var(--paper-400);
  --bg-brand:var(--terracotta-500);
  --bg-brand-hover:var(--terracotta-600);
  --bg-brand-pressed:var(--terracotta-700);
  --bg-brand-subtle:var(--terracotta-50);

  /* ── семантика: текст ── */
  --text-primary:var(--navy-700);
  --text-secondary:var(--navy-500);
  --text-muted:var(--navy-400);
  --text-inverse:var(--paper-50);
  --text-on-brand:#FFFFFF;
  --text-brand:var(--terracotta-500);

  /* ── семантика: границы ──
     ВАЖНО: border/default из токенов (#E3D9C4) на бумаге #F7F1E3 даёт 1.15:1 —
     он годится только как декоративная линейка, но НЕ как обводка элемента.
     Для кнопок, полей ввода и карточек обязателен --border-strong: navy-400
     даёт 4.77:1 при норме WCAG 3:1 для границ компонентов. Замерено, не на глаз. */
  --border-hairline:var(--paper-300);        /* 1.06:1 — только фоновая сетка */
  --border-rule:var(--paper-400);            /* 1.15:1 — разделители секций */
  --border-default:var(--paper-700);         /* 4.19:1 — общая обводка */
  --border-strong:var(--navy-400);           /* 4.77:1 — интерактивные элементы */
  --border-brand:var(--terracotta-500);      /* 4.30:1 */
  --border-focus:var(--terracotta-400);

  /* ── линовка тетради ── */
  --rule-line:rgba(31,45,71,.10);
  --rule-margin:var(--terracotta-500);

  /* ── типографика ── */
  --font-display:'Playfair Display',Georgia,'Iowan Old Style','Times New Roman',serif;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ── вертикальный модуль ── */
  --module:26px;

  /* ── радиусы, тени ── */
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --shadow-card:0 1px 2px rgba(33,23,13,.06),0 6px 16px -2px rgba(33,23,13,.05);
  --shadow-raised:0 10px 28px -4px rgba(33,23,13,.10);
  --focus-ring:0 0 0 3px rgba(201,114,96,.45);
}

/* Тёмная схема из токенов. Пока не применяется — размечена, чтобы
   при включении не собирать её заново. */
@media (prefers-color-scheme:dark){
  :root[data-theme='auto']{
    --bg-canvas:var(--navy-900);
    --bg-surface:var(--navy-800);
    --bg-raised:var(--navy-700);
    --bg-subtle:var(--navy-700);
    --bg-inverse:var(--paper-200);
    --bg-grid:var(--navy-700);
    --bg-brand:var(--terracotta-400);
    --text-primary:var(--paper-100);
    --text-secondary:var(--navy-200);
    --text-muted:var(--navy-300);
    --text-on-brand:var(--navy-900);
    --text-brand:var(--terracotta-300);
    --border-rule:var(--navy-600);
    --border-default:var(--navy-600);
    --border-strong:var(--navy-300);
    --rule-line:rgba(250,245,233,.09);
  }
}