/* ============================================================
   ScriptTonic Design System V1 — Typography
   Native CSS @font-face declarations.
   Font-display: swap for fast first paint.
   Unicode-range ensures correct font per script.
   ============================================================ */

/* === INTER (Latin) === */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === IBM PLEX SANS ARABIC === */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* === JETBRAINS MONO === */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === HEADING SCALE === */
.st-heading-1,
.st-heading-2,
.st-heading-3,
.st-heading-4,
.st-heading-5,
.st-heading-6,
.st-text-body,
.st-text-sm,
.st-text-xs {
  font-family: var(--st-font-sans);
}

.st-heading-1 {
  font-size: var(--st-text-4xl);
  font-weight: var(--st-font-bold);
  line-height: var(--st-leading-tight);
  color: var(--st-text);
}

.st-heading-2 {
  font-size: var(--st-text-3xl);
  font-weight: var(--st-font-semibold);
  line-height: var(--st-leading-tight);
  color: var(--st-text);
}

.st-heading-3 {
  font-size: var(--st-text-2xl);
  font-weight: var(--st-font-semibold);
  line-height: 1.3;
  color: var(--st-text);
}

.st-heading-4 {
  font-size: var(--st-text-xl);
  font-weight: var(--st-font-semibold);
  line-height: 1.35;
  color: var(--st-text);
}

.st-heading-5 {
  font-size: var(--st-text-lg);
  font-weight: var(--st-font-semibold);
  line-height: 1.4;
  color: var(--st-text);
}

.st-heading-6 {
  font-size: var(--st-text-md);
  font-weight: var(--st-font-semibold);
  line-height: 1.4;
  color: var(--st-text);
}

/* === BODY TEXT === */
.st-text-body {
  font-size: var(--st-text-base);
  font-weight: var(--st-font-regular);
  line-height: var(--st-leading-normal);
  color: var(--st-text);
}

.st-text-sm {
  font-size: var(--st-text-sm);
  font-weight: var(--st-font-regular);
  line-height: var(--st-leading-normal);
  color: var(--st-text-muted);
}

.st-text-xs {
  font-size: var(--st-text-xs);
  font-weight: var(--st-font-regular);
  line-height: var(--st-leading-normal);
  color: var(--st-text-muted);
}

/* === MONOSPACE / METADATA === */
.st-text-mono {
  font-family: var(--st-font-mono);
  font-size: var(--st-text-sm);
  font-weight: var(--st-font-regular);
  line-height: var(--st-leading-normal);
  color: var(--st-text);
}

.st-text-mono-xs {
  font-family: var(--st-font-mono);
  font-size: var(--st-text-xs);
  font-weight: var(--st-font-regular);
  line-height: var(--st-leading-normal);
  color: var(--st-text-muted);
}

/* Dark surfaces opt in so legacy foregrounds cannot silently win. */
:where(.st-dark-surface, .st-product-page, .st-community-page, .st-developer-page, .dashboard) {
  color: var(--st-text);
}

:where(.st-dark-surface, .st-product-page, .st-community-page, .st-developer-page, .dashboard)
  :where(.st-page-title, .st-section-title) {
  color: var(--st-text);
}

.st-page-title {
  margin: 0;
  font-family: var(--st-font-sans);
  font-size: var(--st-text-3xl);
  font-weight: var(--st-font-bold);
  line-height: var(--st-leading-tight);
}

.st-section-title {
  margin: 0;
  font-family: var(--st-font-sans);
  font-size: var(--st-text-xl);
  font-weight: var(--st-font-semibold);
  line-height: 1.35;
}

.st-text-secondary { color: var(--st-text-secondary); }
.st-text-disabled { color: var(--st-text-disabled); }

.st-breadcrumb,
.st-breadcrumb a { color: var(--st-text-muted); }

.st-breadcrumb a:hover,
.st-breadcrumb a:focus-visible,
.st-link { color: var(--st-interaction); }