/* ============================================================
   DAFTAR MAJED — Typography
   Cairo font — loaded from Google Fonts (CDN)
   For local: place .woff2 files in /assets/fonts/Cairo/
   ============================================================ */

/* ── Google Fonts (CDN) — Change to @font-face for local ── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap');

/*
  ── LOCAL FONT ALTERNATIVE (uncomment when you have files) ──

@font-face {
  font-family: 'Cairo';
  src: url('../assets/fonts/Cairo/Cairo-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../assets/fonts/Cairo/Cairo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../assets/fonts/Cairo/Cairo-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../assets/fonts/Cairo/Cairo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../assets/fonts/Cairo/Cairo-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
*/

/* ── Type Scale ── */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }

/* ── Weight Utilities ── */
.font-light  { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-semi   { font-weight: var(--font-weight-semi); }
.font-bold   { font-weight: var(--font-weight-bold); }
.font-black  { font-weight: var(--font-weight-black); }

/* ── Color Utilities ── */
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-accent  { color: var(--color-accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

/* ── Headings ── */
.h1 { font-size: var(--text-4xl); font-weight: var(--font-weight-black); }
.h2 { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); }
.h3 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); }
.h4 { font-size: var(--text-xl);  font-weight: var(--font-weight-semi); }
.h5 { font-size: var(--text-lg);  font-weight: var(--font-weight-semi); }

/* ── Section Label (eyebrow text) ── */
.label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Truncate ── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}