/*
 * Design tokens — Altruate
 * Figma: pjwDXRe86lAKHSpDI6ib5f
 */

:root {
  --color-text: #2c3038;
  --color-bg-mobile: #ffffff;
  --color-bg-tablet: #e2faed;
  --color-bg-desktop: #defff0;
  /* Auth forms (Registration, Sign-in, …) — Figma primary/Background[day] */
  --color-bg-auth: #ffffff;
  --color-overlay-scrim: rgba(29, 31, 30, 0.7);
  --color-button: #108b88;
  --color-input-bg: #ffffff;
  --color-input-border: #d1d5db;
  --color-input-border-focus: #108b88;
  --color-input-border-error: #e24c4c;
  --color-error: #e24c4c;
  --color-hint: #6b7280;
  --color-progress-active: #108b88;
  --color-progress-inactive: #c8e8e0;
  --color-button-disabled: #9cc5c3;

  --font-family: "Inter", system-ui, sans-serif;

  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* Mobile page gutter (Figma px-16) — keep form/content off screen edges */
  --page-inline: 16px;

  --content-max: 502px;
  --content-mobile: 343px;
  --content-tablet: 736px;
  --content-desktop: 502px;
  --radius-input: 8px;
  --radius-button: 8px;
  --header-height-mobile: 60px;
  --header-height-tablet: 104px;
  --header-height-desktop: 31px;

  --color-tab-active-bg: #defff0;
  --color-tab-bar-bg: #f9f9f9;
  --color-section-bg: #f5f6fa;
  --color-accent-green: #2dbe7b;
  --color-meta: #737478;
  --sidebar-width: 250px;
  --content-max-profile: 502px;
  --content-viewport-mobile: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1280px;
  --tabbar-height: 84px;
  --profile-scroll-padding-bottom: 116px;
  --app-topbar-bar-height: 40px;
  --app-topbar-offset-mobile: calc(var(--space-16) + var(--app-topbar-bar-height));
  --app-topbar-offset-desktop: calc(20px + var(--app-topbar-bar-height));
  --app-chrome-z-top: 60;
  --app-chrome-z-side: 50;
  --app-chrome-z-tabbar: 50;
}