@font-face {
  font-family: "Noto Sans Sinhala";
  src: url("./assets/fonts/noto-sans-sinhala-sinhala.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  unicode-range:
    U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC, U+111E1-111F4;
}

:root {
  --et-font-interface:
    "Noto Sans Sinhala", "DM Sans", "Nirmala UI", "Iskoola Pota", system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --et-font-display: "Noto Sans Sinhala", "Playfair Display", Georgia, serif;
  --et-si-body-size: 1rem;
  --et-si-body-leading: 1.75;
  --et-si-label-size: 0.9375rem;
  --et-si-control-leading: 1.65;
  --et-si-section-size: clamp(1.25rem, 2vw, 1.5rem);
  --et-si-page-size: clamp(1.75rem, 3vw, 2.5rem);
}

html:lang(si) {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html:lang(si) body {
  font-family: var(--et-font-interface);
  font-size: var(--et-si-body-size);
  font-weight: 400;
  line-height: var(--et-si-body-leading);
  font-synthesis: none;
}

html:lang(si)
  :where(
    p,
    li,
    label,
    button,
    input,
    textarea,
    select,
    option,
    td,
    th,
    legend,
    dialog,
    .toast
  ) {
  letter-spacing: normal;
  word-spacing: normal;
  word-break: normal;
  overflow-wrap: break-word;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

html:lang(si)
  :where(
    button,
    input,
    textarea,
    select,
    option,
    label,
    legend,
    dialog,
    .toast
  ) {
  font-family: var(--et-font-interface);
}

html:lang(si) :where(h1, h2, h3) {
  font-family: var(--et-font-display);
  line-height: 1.45;
  letter-spacing: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

html:lang(si) :where(p, li) {
  line-height: var(--et-si-body-leading);
}

html:lang(si)
  :where(
    nav a,
    nav button,
    label,
    legend,
    .button,
    .btn,
    .text-button,
    .row-button,
    .top-link,
    .menu-button
  ) {
  font-size: var(--et-si-label-size);
  font-weight: 500;
  line-height: var(--et-si-control-leading);
}

html:lang(si) :where(input, textarea, select) {
  min-height: 3rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--et-si-control-leading);
}

html:lang(si) textarea {
  min-height: 7.5rem;
}

html:lang(si) :where(.button, .btn) {
  min-height: 2.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
}

html:lang(si) .button.small {
  min-height: 2.375rem;
  font-size: 0.875rem;
}

html:lang(si) :where(.auth-card h1, .page-head h1) {
  font-size: var(--et-si-page-size);
  font-weight: 700;
  line-height: 1.45;
}

html:lang(si) .auth-story h2 {
  font-weight: 700;
  line-height: 1.4;
}

html:lang(si) :where(.section h2, .panel-head h2, .dialog-head h2, .lesson h2) {
  font-size: var(--et-si-section-size);
  font-weight: 600;
  line-height: 1.5;
}

html:lang(si)
  :where(
    .hero p,
    .section > p,
    .request p,
    .booking p,
    .contact p,
    .support p,
    .account p,
    .page-head p:not(.eyebrow),
    .panel-head p,
    .note-box p,
    .sop-row p
  ) {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
}

html:lang(si)
  :where(.security-note, .notice-box, aside, form > small, .empty-state span) {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
}

html:lang(si)
  :where(.sidebar nav button, .quick-action b, .quick b, .profile-button b) {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
}

html:lang(si)
  :where(
    .quick-action small,
    .quick small,
    .profile-button small,
    .panel-head p,
    .record-line small,
    .document-row small,
    .search-result small,
    .list-row small,
    .approval-card small,
    .course-card p,
    .sop-row p,
    td small
  ) {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.65;
}

html:lang(si)
  :where(
    td,
    .record-line,
    .document-row,
    .search-result,
    .list-row,
    .approval-card
  ) {
  font-size: 0.9375rem;
  line-height: 1.7;
}

html:lang(si) th {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.55;
}

html:lang(si) .badge {
  min-height: 1.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

html:lang(si) .course-card h3 {
  font-family: var(--et-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.55;
}

html:lang(si) .course-card p {
  font-size: 1rem;
  line-height: 1.75;
}

html:lang(si) .lesson {
  max-width: 72ch;
  margin-inline: auto;
}

html:lang(si) .lesson :where(p, li) {
  font-size: clamp(1.0625rem, 1.5vw, 1.125rem);
  font-weight: 400;
  line-height: 1.85;
}

html:lang(si) .lesson li + li {
  margin-top: 0.625rem;
}

html:lang(si) .lesson :where(p, ul, ol) + :where(p, ul, ol, h2, h3, form) {
  margin-top: 1.25rem;
}

html:lang(si)
  :where(
    .document-row small,
    .company-block,
    .document-company,
    .contacts,
    .print-sheet footer
  ) {
  overflow-wrap: anywhere;
}

html:lang(si) .toast {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
}

html:lang(si) .typography-preview-main {
  width: min(1080px, calc(100% - 2rem));
  margin: 2rem auto 5rem;
}

html:lang(si) .typography-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

html:lang(si)
  :where(
    .typography-preview-grid,
    .typography-preview-grid > *,
    .panel,
    .panel-head,
    .panel-head > *
  ) {
  min-width: 0;
}

html:lang(si) .typography-preview-main table {
  min-width: 0;
}

@media (max-width: 720px) {
  html:lang(si) .typography-preview-grid {
    grid-template-columns: 1fr;
  }
}