/* =========================================================================
   tokens.css — СГЕНЕРИРОВАН из design.md (IMCP Account System, version alpha)
   2026-10-30T08:58:15.211Z · scripts/sync-design-tokens.js

   Руками НЕ править: правка переживёт ровно до следующего `npm run sync-tokens`.
   Меняется design.md (владелец — агент `designer`), затем пересборка.
   Ни один файл в src/ не имеет права содержать сырой hex или px вне шкалы.
   ========================================================================= */
:root {

  /* ---------- Шрифты -------------------------------------------------------- */
  --font-display: "Oranienbaum", "Georgia", serif;
  --font-ui: "Montserrat", "Segoe UI", sans-serif;

  /* ---------- Цвета --------------------------------------------------------- */
  --color-primary: #2f3642;
  --color-secondary: #38719f;
  --color-tertiary: #009abf;
  --color-neutral: #fffcfa;
  --color-surface: #ffffff;
  --color-on-surface: #2f3642;
  --color-on-surface-variant: #5a6372;
  --color-outline: #e2e2e2;
  --color-error: #a52f1d;
  --color-on-error: #fffcfa;
  --color-surface-page: #fffcfa;
  --color-surface-page-dense: #f5f5f5;
  --color-surface-card: #ffffff;
  --color-surface-sunken: #f5f5f5;
  --color-surface-muted: #ededed;
  --color-surface-inverse: #2f3642;
  --color-surface-accent-soft: #ccebff;
  --color-surface-accent-softer: #d2e3ea;
  --color-text-primary: #2f3642;
  --color-text-secondary: #5a6372;
  --color-text-disabled: #999999;
  --color-text-inverse: #fffcfa;
  --color-text-on-accent: #fffcfa;
  --color-text-on-inverse-muted: #b5bbc5;
  --color-text-link: #38719f;
  --color-text-link-hover: #306088;
  --color-border-subtle: #e2e2e2;
  --color-border-default: #c9d9e7;
  --color-border-control: #7f8794;
  --color-border-strong: #5a6372;
  --color-border-focus: #009abf;
  --color-accent-brand: #38719f;
  --color-accent-brand-hover: #306088;
  --color-accent-brand-active: #2d5b80;
  --color-accent-cyan: #009abf;
  --color-accent-cyan-bright: #00ceff;
  --color-accent-gold: #decca2;
  --color-success: #087d5a;
  --color-success-surface: #e7f9f3;
  --color-success-border: #a2d7c7;
  --color-warning: #846315;
  --color-warning-surface: #f9f0dc;
  --color-warning-border: #dbc99f;
  --color-danger: #a52f1d;
  --color-danger-surface: #f9e0dc;
  --color-danger-border: #dba79f;
  --color-info: #306088;
  --color-info-surface: #d2e3ea;
  --color-info-border: #a2c0d7;
  --color-neutral-badge: #5a6372;
  --color-neutral-badge-surface: #ededed;

  /* ---------- Слои на тёмном (только НЕтекстовые) --------------------------- */
  --color-inverse-a40: rgba(255, 252, 250, 0.40);
  --color-inverse-a28: rgba(255, 252, 250, 0.28);
  --color-inverse-a20: rgba(255, 252, 250, 0.20);
  --color-inverse-a12: rgba(255, 252, 250, 0.12);

  /* ---------- Градиенты ----------------------------------------------------- */
  --gradient-brand-dark: linear-gradient(0.125turn, #326386 0%, #123f50 100%);
  --gradient-brand-dark-decorative: linear-gradient(0.125turn, #4486b5 0%, #123f50 100%);
  --gradient-gold: linear-gradient(0.194turn, #9d917c 0%, #e7dabc 28%, #f7ecd6 62%, #b7a982 100%);

  /* ---------- Типографика (weight size/line-height family) ------------------ */
  --type-display: 400 48px/1.1 var(--font-display);
  --tracking-display: -0.005em;
  --type-headline-lg: 400 36px/1.15 var(--font-display);
  --type-headline-md: 400 28px/1.2 var(--font-display);
  --type-title-lg: 600 22px/1.3 var(--font-ui);
  --type-title-md: 600 18px/1.35 var(--font-ui);
  --type-title-sm: 600 16px/1.4 var(--font-ui);
  --type-body-lg: 400 18px/1.6 var(--font-ui);
  --type-body-md: 400 16px/1.55 var(--font-ui);
  --type-body-sm: 400 14px/1.5 var(--font-ui);
  --type-body-xs: 400 13px/1.45 var(--font-ui);
  --type-label-md: 500 14px/1.2 var(--font-ui);
  --tracking-label-md: 0.01em;
  --type-label-sm: 500 12px/1.2 var(--font-ui);
  --tracking-label-sm: 0.02em;
  --type-label-caps: 600 11px/1 var(--font-ui);
  --tracking-label-caps: 0.08em;
  --type-numeric-slot: 500 16px/1.2 var(--font-ui);
  --type-numeric-table: 400 13px/1.4 var(--font-ui);

  /* ---------- Скругления ---------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 30px;
  --radius-xl: 50px;
  --radius-pill: 3000px;

  /* ---------- Отступы (базовая сетка 4px) ----------------------------------- */
  --space-x1: 4px;
  --space-x2: 8px;
  --space-x3: 12px;
  --space-x4: 16px;
  --space-x5: 20px;
  --space-x6: 24px;
  --space-x8: 32px;
  --space-x10: 40px;
  --space-x12: 48px;
  --space-x16: 64px;

  /* ---------- Тени и глубина ------------------------------------------------ */
  --elevation-flat: none;
  --elevation-raised: 0 1px 2px rgba(47, 54, 66, 0.06);
  --elevation-overlay: 0 4px 12px rgba(47, 54, 66, 0.08);
  --elevation-modal: 0 12px 32px rgba(47, 54, 66, 0.12);
  --elevation-focus-ring: 0 0 0 3px rgba(0, 154, 191, 0.35);

  /* ---------- Движение ------------------------------------------------------ */
  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow: 280ms cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Брейкпоинты (в @media переменные не работают — держим как справку) -- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* ---------- Плотность: comfortable — значения по умолчанию ---------------- */
  --control-height: 48px;
  --row-height: 56px;
  --card-padding: var(--space-x6);
  --card-gap: var(--space-x4);
  --field-gap: var(--space-x5);
  --section-gap: var(--space-x8);
  --page-padding: var(--space-x10);
  --type-body-base: var(--type-body-lg);
  --touch-target: 48px;
  --container-max: 880px;
  --header-height: 64px;
  --header-padding-y: var(--space-x2);
  --header-logo-height: 48px;
  --header-avatar-size: var(--space-x10);
}

/* Плотность: compact. Включается классом на <body>. */
.density-compact {
  --control-height: 36px;
  --row-height: 36px;
  --card-padding: var(--space-x4);
  --card-gap: var(--space-x2);
  --field-gap: var(--space-x3);
  --section-gap: var(--space-x5);
  --page-padding: var(--space-x6);
  --type-body-base: var(--type-body-sm);
  --touch-target: 32px;
  --container-max: 1440px;
  --header-height: 40px;
  --header-padding-y: var(--space-x1);
  --header-logo-height: 32px;
  --header-avatar-size: var(--space-x8);
}

@media (max-width: 768px) {
  :root {
    --page-padding: var(--space-x4);
  }
  .density-compact {
    --page-padding: var(--space-x3);
  }
}