/* Fintablo Design System tokens.
 * Resolved component values, not a complete Variables collection export.
 * Family sizes and colors remain scoped.
 * One value is the pilot's, not the system's: --ft-header-surface is transparent, the header has no fill.
 * The logo and the divider lines are styled by the screen style sheets, not by these tokens.
 */

:root {
  --ft-sidebar-width: 260px;
  --ft-header-height: 66px;
  --ft-menu-root-height: 40px;
  --ft-menu-child-height: 34px;
  --ft-menu-icon-size: 24px;
  --ft-menu-chevron-size: 16px;
  --ft-menu-inset: 10px;
  --ft-menu-root-radius: 8px;
  --ft-menu-root-padding-y: 8px;
  --ft-menu-root-padding-left: 16px;
  --ft-menu-root-padding-right: 16px;
  --ft-menu-root-gap: 10px;
  --ft-menu-child-radius: 8px;
  --ft-menu-child-padding-y: 8px;
  --ft-menu-child-padding-left: 42px;
  --ft-menu-child-padding-right: 16px;
  --ft-menu-child-gap: 8px;
  --ft-button-height: 37px;
  --ft-button-radius: 5px;
  --ft-button-padding-y: 10px;
  --ft-button-padding-x: 32px;
  --ft-button-gap: 10px;
  --ft-input-height: 34px;
  --ft-input-radius: 4px;
  --ft-input-padding-y: 8px;
  --ft-input-padding-x: 16px;
  --ft-input-gap: 8px;
  --ft-search-height: 36px;
  --ft-search-radius: 4px;
  --ft-amount-height: 41px;
  --ft-amount-radius: 4px;
  --ft-description-height: 72px;
  --ft-description-radius: 4px;
  --ft-quick-height: 26px;
  --ft-quick-radius: 4px;
  --ft-quick-hover-height: 30px;
  --ft-quick-hover-radius: 4px;
  --ft-button-secondary-height: 44px;
  --ft-button-secondary-radius: 10px;
  --ft-button-secondary-icon-height: 44px;
  --ft-button-secondary-icon-radius: 5px;
  --ft-amount-padding-y: 8px;
  --ft-amount-padding-x: 8px;
  --ft-description-light-padding-y: 8px;
  --ft-description-light-padding-x: 8px;
  --ft-description-dark-padding-y: 8px;
  --ft-description-dark-padding-x: 16px;
  --ft-button-icon-s-size: 37px;
  --ft-button-icon-m-size: 45px;
  --ft-button-icon-l-size: 48px;
  --ft-tooltip-radius: 10px;
  --ft-tooltip-padding-y: 16px;
  --ft-tooltip-padding-x: 24px;
  --ft-tooltip-compact-radius: 4px;
  --ft-tooltip-action-radius: 16px;
  --ft-popup-radius: 8px;
  --ft-popup-padding-y: 16px;
  --ft-popup-padding-x: 16px;
  --ft-popup-period-radius: 16px;
  --ft-popup-graphs-radius: 16px;
  --ft-font-family:
    Dossier, "Source Sans Pro", "Segoe UI", sans-serif; /* Dossier = локальный Source Sans Pro (app.css @font-face) */
  --ft-type-heading-size: 30px;
  --ft-type-heading-line-height: 40px;
  --ft-type-heading-weight: 600;
  --ft-type-subheading-size: 22px;
  --ft-type-subheading-line-height: 31.5px;
  --ft-type-subheading-weight: 600;
  --ft-type-title-bold-size: 20px;
  --ft-type-title-bold-line-height: 29px;
  --ft-type-title-bold-weight: 700;
  --ft-type-title-size: 20px;
  --ft-type-title-line-height: 29px;
  --ft-type-title-weight: 600;
  --ft-type-subtitle-size: 18px;
  --ft-type-subtitle-line-height: 26px;
  --ft-type-subtitle-weight: 600;
  --ft-type-body-strong-size: 16px;
  --ft-type-body-strong-line-height: 23px;
  --ft-type-body-strong-weight: 600;
  --ft-type-body-size: 16px;
  --ft-type-body-line-height: 23px;
  --ft-type-body-weight: 400;
  --ft-type-table-strong-size: 14px;
  --ft-type-table-strong-line-height: 20px;
  --ft-type-table-strong-weight: 600;
  --ft-type-small-size: 14px;
  --ft-type-small-line-height: 20px;
  --ft-type-small-weight: 400;
  --ft-type-planning-size: 13px;
  --ft-type-planning-line-height: 19px;
  --ft-type-planning-weight: 600;
  --ft-type-integration-size: 13px;
  --ft-type-integration-line-height: 19px;
  --ft-type-integration-weight: 400;
  --ft-type-caption-size: 12px;
  --ft-type-caption-line-height: 18px;
  --ft-type-caption-weight: 400;
  --ft-type-micro-size: 10px;
  --ft-type-micro-line-height: 14.5px;
  --ft-type-micro-weight: 400;
  --ft-menu-root-font-size: 16px;
  --ft-menu-root-font-weight: 400;
  --ft-menu-root-line-height: 20.112px;
  --ft-menu-child-font-size: 14px;
  --ft-menu-child-font-weight: 400;
  --ft-menu-child-line-height: 17.598px;
  --ft-button-font-size: 14px;
  --ft-button-font-weight: 600;
  --ft-button-line-height: 17.598px;
  --ft-input-font-size: 14px;
  --ft-input-font-weight: 400;
  --ft-input-line-height: 17.598px;
  --ft-amount-font-size: 20px;
  --ft-amount-font-weight: 700;
  --ft-amount-line-height: 25.14px;
  --ft-menu-current-font-weight: 600;
}

:root,
[data-theme="light"] {
  --ft-primary: #5a76c9;
  --ft-primary-hover: #3e559a;
  --ft-danger: #d85b53;
  --ft-danger-hover: #ac2929;
  --ft-workspace-surface: #f1f2f7;
  --ft-menu-surface: #ffffff;
  --ft-dashboard-surface: #f8f8fa;
  --ft-text-nav: #273971;
  --ft-text-body: #333333;
  --ft-text-secondary: #787c80;
  --ft-link: #2e51b7;
  --ft-success: #179b34;
  --ft-table-header-surface: #f6f6f7;
  --ft-table-hover-surface: #fffcef;
  --ft-table-boundary-surface: #fafafa;
  --ft-graph-line: #e3e5ed;
  --ft-primary-text: #ffffff;
  --ft-primary-disabled: #b6c7f9;
  --ft-primary-disabled-text: #ffffff;
  --ft-primary-loading: #5a76c9;
  --ft-field-default-surface: transparent;
  --ft-field-default-stroke: #e5e5e5;
  --ft-field-default-text: #787c80;
  --ft-field-hover-surface: #f0f6ff;
  --ft-field-hover-stroke: #e5e5e5;
  --ft-field-active-surface: #f4f7ff;
  --ft-field-active-stroke: #5a76c9;
  --ft-field-disabled-surface: #f4f4f4;
  --ft-field-disabled-stroke: #f4f4f4;
  --ft-field-disabled-text: #b5b5b5;
  --ft-field-error-surface: transparent;
  --ft-field-error-stroke: #d85b53;
  --ft-field-filled-surface: transparent;
  --ft-field-filled-stroke: #e5e5e5;
  --ft-field-filled-text: #333333;
  --ft-menu-default-surface: transparent;
  --ft-menu-hover-surface: #eaeeff;
  --ft-menu-current-surface: transparent;
  --ft-menu-hover-text: #5a76c9;
  --ft-menu-current-root-text: #5a76c9;
  --ft-menu-current-child-text: #5a76c9;
  --ft-popup-surface: #ffffff;
  --ft-popup-stroke: #e5e5e5;
  --ft-tooltip-surface: #ffffff;
  --ft-tooltip-text: #273971;
  --ft-header-surface: transparent;
}