@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap");

:root{
  --font-main:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:var(--font-main);

  --font-xs:12px;
  --font-sm:13px;
  --font-base:14px;
  --font-md:15px;
  --font-lg:18px;
  --font-xl:24px;
  --font-2xl:32px;

  --font-display-size:34px;
  --font-page-title:30px;
  --font-section-title:20px;
  --font-card-title:17px;
  --font-body:14px;
  --font-body-sm:13px;
  --font-caption:12px;
  --font-label:12px;
  --font-button:13px;
  --font-badge:12px;

  --type-page-title:var(--font-page-title);
  --type-page-subtitle:var(--font-body);
  --type-section-title:var(--font-section-title);
  --type-section-description:var(--font-body-sm);
  --type-card-title:var(--font-card-title);
  --type-card-subtitle:var(--font-body-sm);
  --type-widget-title:var(--font-md);
  --type-body:var(--font-body);
  --type-secondary:var(--font-body-sm);
  --type-row-title:var(--font-md);
  --type-row-meta:var(--font-body-sm);
  --type-table-head:var(--font-caption);
  --type-table-body:var(--font-body);
  --type-label:var(--font-label);
  --type-helper:var(--font-caption);
  --type-control:var(--font-body);
  --type-button:var(--font-button);
  --type-badge:var(--font-badge);

  --weight-page-title:var(--font-extrabold);
  --weight-section-title:var(--font-bold);
  --weight-card-title:var(--font-semibold);
  --weight-body:var(--font-regular);
  --weight-secondary:var(--font-medium);
  --weight-label:var(--font-semibold);
  --weight-button:var(--font-semibold);
  --weight-badge:var(--font-semibold);

  --line-heading:1.08;
  --line-title:1.18;
  --line-body:1.45;
  --line-compact:1.22;

  --font-regular:400;
  --font-medium:500;
  --font-semibold:600;
  --font-bold:700;
  --font-extrabold:800;
  --font-black:900;
}

body{
  font-family:var(--font-main);
  font-size:var(--font-body);
  line-height:var(--line-body);
  color:var(--text-primary);
}

h1,h2,h3,h4,p,span,small,strong,label{
  letter-spacing:0;
}

h1,h2,h3,h4{
  margin:0;
  color:var(--text-primary);
  font-family:var(--font-display);
  line-height:var(--line-title);
}

h1{font-size:var(--font-page-title);font-weight:var(--font-extrabold);}
h2{font-size:var(--font-section-title);font-weight:var(--font-bold);}
h3{font-size:var(--font-card-title);font-weight:var(--font-semibold);}
h4{font-size:var(--font-md);font-weight:var(--font-semibold);}
p{margin:0;color:var(--text-secondary);font-size:var(--font-body);line-height:var(--line-body);}
small{font-size:var(--font-caption);line-height:var(--line-compact);}
label{font-size:var(--font-label);font-weight:var(--font-medium);color:var(--text-secondary);}
strong{font-weight:var(--font-semibold);}

.text-display{font-family:var(--font-display);font-size:var(--font-display-size);font-weight:var(--font-extrabold);line-height:var(--line-heading);}
.text-page-title{font-family:var(--font-display);font-size:var(--font-page-title);font-weight:var(--font-extrabold);line-height:var(--line-heading);}
.text-section-title{font-family:var(--font-display);font-size:var(--font-section-title);font-weight:var(--font-bold);line-height:var(--line-title);}
.text-section-description{font-size:var(--type-section-description);font-weight:var(--weight-body);line-height:var(--line-body);color:var(--text-muted);}
.text-card-title{font-size:var(--font-card-title);font-weight:var(--font-semibold);line-height:var(--line-title);}
.text-card-description{font-size:var(--type-card-subtitle);font-weight:var(--weight-secondary);line-height:var(--line-body);color:var(--text-muted);}
.text-widget-title{font-size:var(--type-widget-title);font-weight:var(--weight-card-title);line-height:var(--line-title);}
.text-body{font-size:var(--font-body);font-weight:var(--font-regular);line-height:var(--line-body);}
.text-body-sm{font-size:var(--font-body-sm);font-weight:var(--font-regular);line-height:var(--line-body);}
.text-caption{font-size:var(--font-caption);font-weight:var(--font-medium);line-height:var(--line-compact);}
.text-label{font-size:var(--font-label);font-weight:var(--font-semibold);line-height:var(--line-compact);}
.text-helper{font-size:var(--type-helper);font-weight:var(--weight-secondary);line-height:var(--line-compact);color:var(--text-muted);}
.text-muted{color:var(--text-muted);}
.text-strong{font-weight:var(--font-semibold);color:var(--text-primary);}
