@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --font-ui: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --type-title: clamp(1.75rem, 2.8vw, 2.625rem);
  --type-section: clamp(1.17rem, 1.55vw, 1.42rem);
  --type-subtitle: 1rem;
  --type-body: .9375rem;
  --type-control: .875rem;
  --type-nav: .9rem;
  --type-label: .8125rem;
  --type-small: .75rem;
  --weight-body: 400;
  --weight-nav: 500;
  --weight-control: 600;
  --weight-title: 700;
  --leading-body: 1.55;
  --leading-control: 1.45;
  --tracking-title: -.04em;
  --tracking-section: -.035em;
  --tracking-control: -.01em;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --pill-radius: 999px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 180ms;
  --motion-soft: 320ms;
  --header-shadow: 0 6px 24px rgb(23 20 17 / 7%), 0 1px 3px rgb(23 20 17 / 4%);
}

body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}
button, input, textarea, select, dialog { font-family: var(--font-ui); }
.page-heading h1, .studio-title-row h1, .jld-heading h1, .login-card h1 {
  font-size: var(--type-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
  line-height: 1.1;
}
.card-head h2, .jld-section-heading h2, .jld-dialog-head h2 {
  font-size: var(--type-section);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-section);
  line-height: 1.2;
}
.workflow-step-copy h3 {
  font-size: var(--type-subtitle);
  font-weight: var(--weight-title);
  letter-spacing: -.015em;
  line-height: 1.25;
}
.btn, .heading-actions .btn, .studio-products-heading .btn, .workflow-nav button {
  font-size: var(--type-label);
  font-weight: var(--weight-control);
  letter-spacing: var(--tracking-control);
  line-height: var(--leading-control);
}
.form-group label, .workflow-primary-measures > .form-group > label, .client-kind legend {
  font-size: var(--type-label);
  font-weight: var(--weight-control);
}
.form-group :is(input, select, textarea), .visual-editor-fields :is(input, select) { font-size: var(--type-control); }
.page-heading p, .workflow-step-copy p, .help-text, .workflow-note, .workflow-inline-hint, .login-help {
  font-size: var(--type-label);
  line-height: var(--leading-body);
}
.card-eyebrow, .preview-badge, .visual-eyebrow, .small-label {
  font-size: var(--type-small);
  font-weight: var(--weight-control);
  letter-spacing: .035em;
}
.studio-table, .jld-day-table { font-size: var(--type-control); }
.studio-table th, .jld-day-table th { font-size: var(--type-small); font-weight: var(--weight-control); }
@media (max-width: 780px) {
  .form-group :is(input, select, textarea), .visual-editor-fields :is(input, select) { font-size: 1rem; }
}