/* Forma Studio Design System · v1 */
:root {
  --color-bg: #0b1118 !important;
  --color-surface: #121c27 !important;
  --color-title: #f4f8fc !important;
  --color-text: #b7c4d2 !important;
  --color-primary: #7bdcff !important;
  --color-on-primary: #08131c !important;
  --color-border: #2a3b4c !important;
  --color-primary-hover: #a3e7ff !important;
  --color-primary-active: #59c8ef !important;
  --scrollbar-thumb: var(--color-primary) !important;
  --scrollbar-track: var(--color-bg) !important;
  --font-heading: Arial, sans-serif !important;
  --font-body: Arial, sans-serif !important;
  --font-h1: 48px !important;
  --font-h2: 40px !important;
  --font-h3: 24px !important;
  --font-body-size: 18px !important;
  --font-small: 16px !important;
  --icon-size: 24px !important;
  --icon-feature: 48px !important;
  --container-max: 1280px !important;
  --page-gutter: 20px !important;
  --section-space: 100px !important;
  --layout-gap: 24px !important;
  --space-xs: 4px !important;
  --space-sm: 8px !important;
  --space-md: 16px !important;
  --space-lg: 24px !important;
  --space-xl: 32px !important;
  --space-2xl: 48px !important;
  --radius-sm: 4px !important;
  --radius-md: 8px !important;
  --radius-lg: 16px !important;
  --shadow-sm: 0 2px 8px #00000014 !important;
  --shadow-md: 0 8px 24px #0000001A !important;
  --font-weight-heading: 600 !important;
  --font-weight-body: 400 !important;
  --line-height-heading: 1.4 !important;
  --line-height-body: 1.2 !important;
}

@media (max-width: 1440px) {
:root { --font-h1: 44px !important; }
}

@media (max-width: 1024px) {
:root { --font-h1: 38px !important; }
}

@media (max-width: 768px) {
:root { --font-h1: clamp(28px, 7vw, 40px) !important; }
}

@media (max-width: 1440px) {
:root { --font-h2: 36px !important; }
}

@media (max-width: 1024px) {
:root { --font-h2: 32px !important; }
}

@media (max-width: 768px) {
:root { --font-h2: clamp(24px, 6.6vw, 36px) !important; }
}

@media (max-width: 1024px) {
:root { --font-h3: 22px !important; }
}

@media (max-width: 768px) {
:root { --font-h3: clamp(20px, 5.2vw, 28px) !important; }
}

@media (max-width: 1024px) {
:root { --font-body-size: 17px !important; }
}

@media (max-width: 768px) {
:root { --font-body-size: clamp(16px, 4.2vw, 20px) !important; }
}

@media (max-width: 768px) {
:root { --font-small: clamp(14px, 3.8vw, 16px) !important; }
}

@media (max-width: 768px) {
:root { --icon-size: clamp(20px, 6vw, 28px) !important; }
}

@media (max-width: 1440px) {
:root { --icon-feature: 40px !important; }
}

@media (max-width: 768px) {
:root { --icon-feature: clamp(32px, 10vw, 48px) !important; }
}

@media (max-width: 1440px) {
:root { --page-gutter: 32px !important; }
}

@media (max-width: 768px) {
:root { --page-gutter: 20px !important; }
}

@media (max-width: 1024px) {
:root { --section-space: 80px !important; }
}

@media (max-width: 768px) {
:root { --section-space: 50px !important; }
}
/* End Forma Studio Design System */