:root {
  --pri: #0054ad;
  --pri-d: #003f88;
  --pri-lo: rgba(0,84,173,.10);
  --pri-lo2: rgba(0,84,173,.16);
  --pri-glo: rgba(0,84,173,.30);
  --pri-bdr: rgba(0,84,173,.28);
  --pri-bdr2: rgba(0,84,173,.50);

  --gold: #CCDDEF;
  --gold-lo: rgba(204,221,239,.12);
  --green: #22c55e;
  --cyan: #22d3ee;
  --amber: #f59e0b;
  --orange: #f97316;
  --red: #ef4444;
  --violet: #7c3aed;

  --ease: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --type-display-desktop: 64px;
  --type-display-tablet: 48px;
  --type-display-mobile: 32px;
  --type-section-desktop: 44px;
  --type-section-tablet: 36px;
  --type-section-mobile: 30px;
  --type-subsection-desktop: 32px;
  --type-subsection-tablet: 26px;
  --type-subsection-mobile: 22px;
  --type-card-title-desktop: 24px;
  --type-card-title-tablet: 22px;
  --type-card-title-mobile: 20px;
  --type-body-desktop: 18px;
  --type-body-tablet: 17px;
  --type-body-mobile: 16px;
  --type-label-desktop: 14px;
  --type-label-tablet: 13px;
  --type-label-mobile: 12px;
  --fs-button: 14px;

  --type-display: var(--type-display-desktop);
  --type-section: var(--type-section-desktop);
  --type-subsection: var(--type-subsection-desktop);
  --type-card-title: var(--type-card-title-desktop);
  --type-body: var(--type-body-desktop);
  --type-label: var(--type-label-desktop);

  --fs-h1-desktop: var(--type-display-desktop);
  --fs-h1-tablet: var(--type-display-tablet);
  --fs-h1-mobile: var(--type-display-mobile);
  --fs-h2-desktop: var(--type-section-desktop);
  --fs-h2-tablet: var(--type-section-tablet);
  --fs-h2-mobile: var(--type-section-mobile);
  --fs-h3-desktop: var(--type-subsection-desktop);
  --fs-h3-tablet: var(--type-subsection-tablet);
  --fs-h3-mobile: var(--type-subsection-mobile);
  --fs-h4-desktop: var(--type-card-title-desktop);
  --fs-h4-tablet: var(--type-card-title-tablet);
  --fs-h4-mobile: var(--type-card-title-mobile);
  --fs-h5-desktop: var(--type-body-desktop);
  --fs-h5-tablet: var(--type-body-tablet);
  --fs-h5-mobile: var(--type-body-mobile);
  --fs-h6-desktop: var(--type-label-desktop);
  --fs-h6-tablet: var(--type-label-tablet);
  --fs-h6-mobile: var(--type-label-mobile);
  --fs-body-desktop: var(--type-body-desktop);
  --fs-body-tablet: var(--type-body-tablet);
  --fs-body-mobile: var(--type-body-mobile);
  --fs-small-desktop: var(--type-label-desktop);
  --fs-small-tablet: var(--type-label-tablet);
  --fs-small-mobile: var(--type-label-mobile);

  --fs-h1: var(--type-display);
  --fs-h2: var(--type-section);
  --fs-h3: var(--type-subsection);
  --fs-h4: var(--type-card-title);
  --fs-h5: var(--type-body);
  --fs-h6: var(--type-label);
  --fs-body: var(--type-body);
  --fs-small: var(--type-label);

  --fw-h1: 700;
  --fw-h2: 700;
  --fw-h3: 700;
  --fw-h4: 700;
  --fw-h5: 700;
  --fw-h6: 700;
  --fw-body: 400;
  --fw-small: 400;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;

  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --nav-h: 64px;
}

:root,
html[data-theme="dark"],
html[data-theme="system"].os-dark {
  --bg: #000000;
  --bg2: #0a0a0a;
  --bg3: #121212;
  --surf: rgba(255,255,255,.048);
  --surf2: rgba(255,255,255,.088);
  --bdr: rgba(255,255,255,.13);
  --bdr-hi: var(--pri-bdr);
  --text: #eceff8;
  --muted: #9aa8bb;
  --dim: #32405a;
  --head: #f2ece4;
  --nav-bg: rgba(0,0,0,.92);
  --drw-bg: #0a0a0a;
  --card-bg: #0a0a0a;
  --code-bg: #050505;
  --sh: 0 2px 4px rgba(0,0,0,.40),0 8px 36px rgba(0,0,0,.30);
  --sh-pri: 0 8px 44px rgba(0,84,173,.45);
  --sm1: rgba(0,84,173,.12);
  --sm2: rgba(204,221,239,.07);
  --sm3: rgba(80,40,200,.06);
  --grad: linear-gradient(135deg,var(--head) 0%,var(--pri) 50%,var(--pri-glo) 100%);
  --hero-bg: #020c1e;
  --hero-orb1: rgba(0,84,173,.18);
  --hero-orb2: rgba(0,84,173,.10);
  --hero-orb3: rgba(204,221,239,.08);
  --inp-bg: rgba(255,255,255,.04);
  --inp-bdr: rgba(255,255,255,.10);
}

html[data-theme="light"],
html[data-theme="system"].os-light {
  --bg: #edf3fc;
  --bg2: #F9FAFB;
  --bg3: #e2ecf8;
  --surf: rgba(0,0,0,.038);
  --surf2: rgba(0,0,0,.072);
  --bdr: rgba(0,0,0,.082);
  --bdr-hi: var(--pri-bdr);
  --text: #121212;
  --muted: #556070;
  --dim: #94a3b8;
  --head: #121212;
  --nav-bg: rgba(237,243,252,.92);
  --drw-bg: #F9FAFB;
  --card-bg: #F9FAFB;
  --code-bg: #121212;
  --sh: 0 1px 3px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.08);
  --sh-pri: 0 8px 44px rgba(0,84,173,.32);
  --sm1: rgba(0,84,173,.07);
  --sm2: rgba(180,140,60,.05);
  --sm3: rgba(80,40,200,.04);
  --grad: linear-gradient(135deg,#0d1629 0%,var(--pri) 50%,var(--pri-glo) 100%);
  --hero-bg: #dce9f8;
  --hero-orb1: rgba(0,84,173,.14);
  --hero-orb2: rgba(0,84,173,.08);
  --hero-orb3: rgba(0,84,173,.05);
  --inp-bg: #fff;
  --inp-bdr: rgba(0,0,0,.12);
}

@media (max-width: 1024px) {
  :root {
    --type-display: var(--type-display-tablet);
    --type-section: var(--type-section-tablet);
    --type-subsection: var(--type-subsection-tablet);
    --type-card-title: var(--type-card-title-tablet);
    --type-body: var(--type-body-tablet);
    --type-label: var(--type-label-tablet);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-h: 58px;
    --type-display: var(--type-display-mobile);
    --type-section: var(--type-section-mobile);
    --type-subsection: var(--type-subsection-mobile);
    --type-card-title: var(--type-card-title-mobile);
    --type-body: var(--type-body-mobile);
    --type-label: var(--type-label-mobile);
  }
}

.type-display,
.role-display {
  font-family: 'Poppins', sans-serif;
  font-size: var(--type-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--head);
}

.type-section,
.role-section {
  font-family: 'Poppins', sans-serif;
  font-size: var(--type-section);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--head);
}

.type-subsection,
.role-subsection {
  font-family: 'Poppins', sans-serif;
  font-size: var(--type-subsection);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--head);
}

.type-card-title,
.role-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: var(--type-card-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--head);
}

.type-body,
.role-body {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.6;
}

.type-label,
.role-label,
small,
.text-small,
.meta {
  font-size: var(--type-label);
  font-weight: 400;
  line-height: 1.5;
}


body.type-scale-shared h2,
body.type-scale-shared .type-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

body.type-scale-shared h3,
body.type-scale-shared .type-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

body.type-scale-shared h4,
body.type-scale-shared .type-h4,
body.type-scale-shared .type-card-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

body.type-scale-shared h5,
body.type-scale-shared .type-h5,
body.type-scale-shared p,
body.type-scale-shared .type-body {
  font-size: var(--fs-h5);
  font-weight: var(--fw-body);
  line-height: 1.6;
}

body.type-scale-shared h6,
body.type-scale-shared .type-h6,
body.type-scale-shared small,
body.type-scale-shared .text-small,
body.type-scale-shared .meta,
body.type-scale-shared .type-label {
  font-size: var(--fs-h6);
  font-weight: var(--fw-small);
  line-height: 1.5;
}