/* KSSK typography.
   Brand book: Amatry Geometric carries Display + Heading; Inter carries
   Title (Bold) > Subtitle (Medium) > Body (Regular) > CTA (Bold).
   Amatry and Inter are the only two faces; nothing else is permitted. */

:root {
  /* Two faces only. 'Baloo 2' sat in this fallback chain in the handoff; it is
     a third typeface and is removed at the client's instruction, the same way
     Nunito Sans and Exo were. system-ui carries the gap until Amatry loads. */
  --font-display: 'Amatry', 'Amatry Geometric', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Sizes - every value present in the source, unrounded */
  --text-xs: 12px;
  --text-note: 13px;
  --text-sm: 14px;
  --text-15: 15px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 38px;
  --text-7xl: 44px;
  --text-8xl: 48px;
  --text-9xl: 64px;

  /* Line heights */
  --leading-tight: 100%; /* @kind other */
  --leading-18: 18px; /* @kind other */
  --leading-22: 22px; /* @kind other */
  --leading-23: 23px; /* @kind other */
  --leading-24: 24px; /* @kind other */
  --leading-30: 30px; /* @kind other */
  --leading-33: 33px; /* @kind other */
  --leading-35: 35px; /* @kind other */
  --leading-37: 37px; /* @kind other */
  --leading-48: 48px; /* @kind other */
  --leading-54: 54px; /* @kind other */
  --leading-57: 57px; /* @kind other */
  --leading-66: 66px; /* @kind other */
  --leading-69: 69px; /* @kind other */

  /* Weights */
  --weight-regular: 400; /* @kind other */
  --weight-medium: 500; /* @kind other */
  --weight-semibold: 600; /* @kind other */
  --weight-bold: 700; /* @kind other */

  /* Roles - brand book type hierarchy */
  --type-display-font: var(--font-display);
  --type-display-size: var(--text-9xl);
  --type-display-leading: var(--leading-69);

  --type-heading-font: var(--font-display);
  --type-heading-size: var(--text-8xl);
  --type-heading-leading: var(--leading-54);

  --type-title-font: var(--font-body);
  --type-title-weight: var(--weight-bold);
  --type-title-size: var(--text-xl);
  --type-title-leading: var(--leading-35);

  --type-subtitle-font: var(--font-body);
  --type-subtitle-weight: var(--weight-medium);
  --type-subtitle-size: var(--text-xl);
  --type-subtitle-leading: var(--leading-30);

  --type-body-font: var(--font-body);
  --type-body-weight: var(--weight-regular);
  --type-body-size: var(--text-base);
  --type-body-leading: var(--leading-24);

  --type-cta-font: var(--font-body);
  --type-cta-weight: var(--weight-bold);
  --type-cta-size: var(--text-base);
  --type-cta-leading: var(--leading-22);
  --type-cta-transform: uppercase; /* @kind other */
}

/* Ready-made role classes. */
.kssk-display { font-family: var(--font-display); font-weight: 400; font-size: var(--text-9xl); line-height: var(--leading-69); color: var(--text-body); }
.kssk-heading { font-family: var(--font-display); font-weight: 400; font-size: var(--text-8xl); line-height: var(--leading-54); color: var(--text-body); }
.kssk-heading-sm { font-family: var(--font-display); font-weight: 400; font-size: var(--text-4xl); line-height: var(--leading-37); color: var(--text-body); }
.kssk-title { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-35); color: var(--text-primary); }
.kssk-subtitle { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xl); line-height: var(--leading-30); color: var(--text-body); }
.kssk-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-24); color: var(--text-body); }
.kssk-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-22); color: var(--text-secondary); }
.kssk-note { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: var(--text-note); line-height: var(--leading-18); color: var(--text-muted); }
.kssk-cta { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); line-height: var(--leading-22); text-transform: uppercase; }