/* ============================================================
   AILA Design System — Giada Theme
   Typography · base
   ------------------------------------------------------------
   Typography in AILA is expressed as composite tokens: instead
   of one variable per property, each style ships as a set of
   variables sharing a prefix (e.g. --heading-1-font-size,
   --heading-1-font-weight, --heading-1-line-height).

   A utility class .t-<token> applies the full style at once.
   Product code can either use the classes or pull the variables
   directly via shorthand `font:` or individual properties.
   ============================================================ */

:root {
  /* family — shared across the whole theme */
  --font-family-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ------------------------------------------------------------
     Headings
     ------------------------------------------------------------ */
  --heading-1-font-family: var(--font-family-sans);
  --heading-1-font-size:   3rem;      /* 48px */
  --heading-1-font-weight: 800;
  --heading-1-line-height: 5rem;      /* 80px */

  --heading-2-font-family: var(--font-family-sans);
  --heading-2-font-size:   2.75rem;   /* 44px */
  --heading-2-font-weight: 700;
  --heading-2-line-height: 3rem;      /* 48px */

  --heading-3-font-family: var(--font-family-sans);
  --heading-3-font-size:   2rem;      /* 32px */
  --heading-3-font-weight: 700;
  --heading-3-line-height: 2.5rem;    /* 40px */

  --heading-4-font-family: var(--font-family-sans);
  --heading-4-font-size:   1.5rem;    /* 24px */
  --heading-4-font-weight: 700;
  --heading-4-line-height: 2rem;      /* 32px */

  --heading-5-font-family: var(--font-family-sans);
  --heading-5-font-size:   1.25rem;   /* 20px */
  --heading-5-font-weight: 700;
  --heading-5-line-height: 1.75rem;   /* 28px */

  --heading-6-font-family: var(--font-family-sans);
  --heading-6-font-size:   1.125rem;  /* 18px */
  --heading-6-font-weight: 700;
  --heading-6-line-height: 1.75rem;   /* 28px */

  /* ------------------------------------------------------------
     Labels (600 weight — actions, form labels, emphasized meta)
     ------------------------------------------------------------ */
  --label-xl-font-family: var(--font-family-sans);
  --label-xl-font-size:   1.25rem;    /* 20px */
  --label-xl-font-weight: 600;
  --label-xl-line-height: 1.75rem;    /* 28px */

  --label-lg-font-family: var(--font-family-sans);
  --label-lg-font-size:   1.125rem;   /* 18px */
  --label-lg-font-weight: 600;
  --label-lg-line-height: 1.75rem;    /* 28px */

  --label-md-font-family: var(--font-family-sans);
  --label-md-font-size:   1rem;       /* 16px */
  --label-md-font-weight: 600;
  --label-md-line-height: 1.5rem;     /* 24px */

  --label-sm-font-family: var(--font-family-sans);
  --label-sm-font-size:   0.875rem;   /* 14px */
  --label-sm-font-weight: 600;
  --label-sm-line-height: 1.25rem;    /* 20px */

  /* ------------------------------------------------------------
     Body (400 weight — reading text)
     ------------------------------------------------------------ */
  --body-xl-font-family: var(--font-family-sans);
  --body-xl-font-size:   1.25rem;     /* 20px */
  --body-xl-font-weight: 400;
  --body-xl-line-height: 1.75rem;     /* 28px */

  --body-lg-font-family: var(--font-family-sans);
  --body-lg-font-size:   1.125rem;    /* 18px */
  --body-lg-font-weight: 400;
  --body-lg-line-height: 1.75rem;     /* 28px */

  --body-md-font-family: var(--font-family-sans);
  --body-md-font-size:   1rem;        /* 16px */
  --body-md-font-weight: 400;
  --body-md-line-height: 1.5rem;      /* 24px */

  --body-sm-font-family: var(--font-family-sans);
  --body-sm-font-size:   0.875rem;    /* 14px */
  --body-sm-font-weight: 400;
  --body-sm-line-height: 1.25rem;     /* 20px */
}

/* ============================================================
   Utility classes — apply a full token in one go
   ============================================================ */

.t-heading-1 { font-family: var(--heading-1-font-family); font-size: var(--heading-1-font-size); font-weight: var(--heading-1-font-weight); line-height: var(--heading-1-line-height); letter-spacing: -0.02em; }
.t-heading-2 { font-family: var(--heading-2-font-family); font-size: var(--heading-2-font-size); font-weight: var(--heading-2-font-weight); line-height: var(--heading-2-line-height); letter-spacing: -0.02em; }
.t-heading-3 { font-family: var(--heading-3-font-family); font-size: var(--heading-3-font-size); font-weight: var(--heading-3-font-weight); line-height: var(--heading-3-line-height); letter-spacing: -0.015em; }
.t-heading-4 { font-family: var(--heading-4-font-family); font-size: var(--heading-4-font-size); font-weight: var(--heading-4-font-weight); line-height: var(--heading-4-line-height); letter-spacing: -0.01em; }
.t-heading-5 { font-family: var(--heading-5-font-family); font-size: var(--heading-5-font-size); font-weight: var(--heading-5-font-weight); line-height: var(--heading-5-line-height); letter-spacing: -0.005em; }
.t-heading-6 { font-family: var(--heading-6-font-family); font-size: var(--heading-6-font-size); font-weight: var(--heading-6-font-weight); line-height: var(--heading-6-line-height); }

.t-label-xl { font-family: var(--label-xl-font-family); font-size: var(--label-xl-font-size); font-weight: var(--label-xl-font-weight); line-height: var(--label-xl-line-height); }
.t-label-lg { font-family: var(--label-lg-font-family); font-size: var(--label-lg-font-size); font-weight: var(--label-lg-font-weight); line-height: var(--label-lg-line-height); }
.t-label-md { font-family: var(--label-md-font-family); font-size: var(--label-md-font-size); font-weight: var(--label-md-font-weight); line-height: var(--label-md-line-height); }
.t-label-sm { font-family: var(--label-sm-font-family); font-size: var(--label-sm-font-size); font-weight: var(--label-sm-font-weight); line-height: var(--label-sm-line-height); }

.t-body-xl { font-family: var(--body-xl-font-family); font-size: var(--body-xl-font-size); font-weight: var(--body-xl-font-weight); line-height: var(--body-xl-line-height); }
.t-body-lg { font-family: var(--body-lg-font-family); font-size: var(--body-lg-font-size); font-weight: var(--body-lg-font-weight); line-height: var(--body-lg-line-height); }
.t-body-md { font-family: var(--body-md-font-family); font-size: var(--body-md-font-size); font-weight: var(--body-md-font-weight); line-height: var(--body-md-line-height); }
.t-body-sm { font-family: var(--body-sm-font-family); font-size: var(--body-sm-font-size); font-weight: var(--body-sm-font-weight); line-height: var(--body-sm-line-height); }

/* ============================================================
   Semantic Typography · Usage
   ------------------------------------------------------------
   Role-based typography. Each usage token binds a base style
   (heading / label / body) AND a semantic text color, so
   product code writes <h1 class="t-page-title"> once and gets
   the right size, weight, line-height and color.
   ============================================================ */

.t-page-title {
  font-family: var(--heading-6-font-family);
  font-size: var(--heading-6-font-size);
  font-weight: var(--heading-6-font-weight);
  line-height: var(--heading-6-line-height);
  color: var(--subtitle-1);
}

.t-card-main-title {
  font-family: var(--heading-6-font-family);
  font-size: var(--heading-6-font-size);
  font-weight: var(--heading-6-font-weight);
  line-height: var(--heading-6-line-height);
  color: var(--subtitle-1);
}

.t-card-secondary-title {
  font-family: var(--label-lg-font-family);
  font-size: var(--label-lg-font-size);
  font-weight: var(--label-lg-font-weight);
  line-height: var(--label-lg-line-height);
  color: var(--subtitle-2);
}

.t-card-number-md {
  font-family: var(--heading-3-font-family);
  font-size: var(--heading-3-font-size);
  font-weight: var(--heading-3-font-weight);
  line-height: var(--heading-3-line-height);
  color: var(--heading);
}

.t-card-number-sm {
  font-family: var(--heading-5-font-family);
  font-size: var(--heading-5-font-size);
  font-weight: var(--heading-5-font-weight);
  line-height: var(--heading-5-line-height);
  color: var(--heading);
}

.t-card-text {
  font-family: var(--body-md-font-family);
  font-size: var(--body-md-font-size);
  font-weight: var(--body-md-font-weight);
  line-height: var(--body-md-line-height);
  color: var(--subtitle-1);
}

.t-help-text {
  font-family: var(--body-sm-font-family);
  font-size: var(--body-sm-font-size);
  font-weight: var(--body-sm-font-weight);
  line-height: var(--body-sm-line-height);
  color: var(--placeholder);
}

.t-caption-small {
  font-family: var(--label-sm-font-family);
  font-size: var(--label-sm-font-size);
  font-weight: var(--label-sm-font-weight);
  line-height: var(--label-sm-line-height);
  color: var(--subtitle-2);
}