/* FinRestore Brandbook v1.0 — canonical web design tokens.
   This file is served by both finrestore.ru and app.finrestore.ru. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("fonts/onest-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("fonts/onest-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("fonts/onest-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("fonts/onest-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --fr-blue-700: #0b3d91;
  --fr-blue-500: #4a6fa5;
  --fr-slate-400: #9aa3b2;
  --fr-ink-950: #0f1722;

  --fr-color-canvas: #f6f8fb;
  --fr-color-surface: #ffffff;
  --fr-color-surface-muted: #f0f3f7;
  --fr-color-surface-strong: #e7ecf3;
  --fr-color-surface-inverse: #0f1722;
  --fr-color-text: #0f1722;
  --fr-color-text-secondary: #526074;
  --fr-color-text-muted: #748095;
  --fr-color-text-inverse: #f8fafc;
  --fr-color-border: #d8dee8;
  --fr-color-border-subtle: #e8ecf2;
  --fr-color-border-strong: #bcc6d4;

  --fr-color-action: #0b3d91;
  --fr-color-action-hover: #082f73;
  --fr-color-action-active: #06265e;
  --fr-color-action-soft: #e9f0fa;
  --fr-color-focus: #4a6fa5;
  --fr-color-disabled: #c9d0db;
  --fr-color-disabled-text: #778396;

  --fr-color-success: #18794e;
  --fr-color-success-soft: #e7f5ed;
  --fr-color-warning: #946200;
  --fr-color-warning-soft: #fff4d6;
  --fr-color-danger: #b42318;
  --fr-color-danger-soft: #fdebea;
  --fr-color-info: #0b3d91;
  --fr-color-info-soft: #e9f0fa;

  --fr-product-card-fill: #dbeafe;
  --fr-product-card-accent: #2563eb;
  --fr-product-mortgage-fill: #ccfbf1;
  --fr-product-mortgage-accent: #0f766e;
  --fr-product-auto-fill: #ede9fe;
  --fr-product-auto-accent: #7c3aed;
  --fr-product-consumer-fill: #fef3c7;
  --fr-product-consumer-accent: #a16207;
  --fr-product-overdue-fill: #fee2e2;
  --fr-product-overdue-accent: #b42318;

  --fr-font-display: "Manrope", "Onest", system-ui, "Segoe UI", sans-serif;
  --fr-font-ui: "Onest", "Manrope", system-ui, "Segoe UI", sans-serif;
  --fr-font-body: var(--fr-font-ui);
  --fr-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fr-space-1: 4px;
  --fr-space-2: 8px;
  --fr-space-3: 12px;
  --fr-space-4: 16px;
  --fr-space-5: 20px;
  --fr-space-6: 24px;
  --fr-space-8: 32px;
  --fr-space-10: 40px;
  --fr-space-12: 48px;

  --fr-radius-small: 4px;
  --fr-radius-medium: 6px;
  --fr-radius-large: 10px;
  --fr-radius-control: var(--fr-radius-small);
  --fr-radius-surface: var(--fr-radius-medium);

  --fr-shadow-floating: 0 16px 44px rgb(15 23 34 / 14%);
  --fr-shadow-popover: 0 8px 24px rgb(15 23 34 / 12%);

  --fr-control-height-small: 32px;
  --fr-control-height: 36px;
  --fr-control-height-large: 42px;
  --fr-header-height: 52px;
  --fr-container: min(1280px, calc(100vw - 40px));

  --fr-text-page: clamp(24px, 2vw, 28px);
  --fr-text-diagnostic: clamp(24px, 2.15vw, 32px);
  --fr-text-section: clamp(17px, 1.4vw, 20px);
  --fr-text-block: 15px;
  --fr-text-body: 14px;
  --fr-text-secondary: 13px;
  --fr-text-meta: 12px;
  --fr-text-kpi: clamp(22px, 1.8vw, 28px);
  --fr-text-landing-hero: clamp(42px, 3.7vw, 52px);
  --fr-text-landing-section: clamp(28px, 2.7vw, 36px);
}

:root[data-theme="dark"],
html[data-theme="dark"] {
  --fr-color-canvas: #0f1722;
  --fr-color-surface: #17212e;
  --fr-color-surface-muted: #121b27;
  --fr-color-surface-strong: #202c3a;
  --fr-color-surface-inverse: #f8fafc;
  --fr-color-text: #f5f7fa;
  --fr-color-text-secondary: #bcc6d4;
  --fr-color-text-muted: #909bad;
  --fr-color-text-inverse: #0f1722;
  --fr-color-border: #334154;
  --fr-color-border-subtle: #273548;
  --fr-color-border-strong: #4d5d71;
  --fr-color-action: #7da2d7;
  --fr-color-action-hover: #9ab7df;
  --fr-color-action-active: #b4c9e5;
  --fr-color-action-soft: #1d304b;
  --fr-color-focus: #9ab7df;
  --fr-color-disabled: #465365;
  --fr-color-disabled-text: #8994a5;
  --fr-color-success: #75c79e;
  --fr-color-success-soft: #173b2d;
  --fr-color-warning: #e2b85f;
  --fr-color-warning-soft: #3b301b;
  --fr-color-danger: #ff918a;
  --fr-color-danger-soft: #482727;
  --fr-color-info: #9ab7df;
  --fr-color-info-soft: #1d304b;
}

@media (max-width: 640px) {
  :root { --fr-container: min(100% - 32px, 1280px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}