/**
 * ============================================================================
 * TYPOGRAPHY SYSTEM — FIKI ARDIANSYAH PERSONAL BRAND
 * ============================================================================
 * Skala tipografi fluid, hierarki heading, styling monospace teknis, dan
 * kepatuhan rasio kontras WCAG 2.1 AA (> 4.5:1 untuk teks normal).
 */

/* 1. Seleksi teks metalik kustom */
::selection {
  background-color: var(--red-primary, #e62e3d);
  color: #ffffff;
}

/* 2. Hierarki Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary, #f5f6f8);
  font-family: var(--font-sans, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--leading-tight, 1.15);
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--text-4xl, 2.5rem);
}

h2 {
  font-size: var(--text-3xl, 2rem);
  letter-spacing: -0.025em;
}

h3 {
  font-size: var(--text-2xl, 1.5rem);
}

h4 {
  font-size: var(--text-xl, 1.25rem);
}

h5 {
  font-size: var(--text-lg, 1.125rem);
}

h6 {
  font-size: var(--text-base, 1rem);
}

/* 3. Paragraf & Teks Deskripsi */
p {
  color: var(--text-secondary, #9da3b0);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-normal, 1.6);
  margin-bottom: var(--space-4, 1rem);
}

p:last-child {
  margin-bottom: 0;
}

/* 4. Eyebrow / Label Kategori Monospace Teknis */
.eyebrow,
.section-badge,
.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red-hover, #ff3b4b);
}

/* 5. Monospace & Code Blocks */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 0.9em;
}

code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm, 4px);
  background-color: var(--surface-card, #151820);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  color: var(--text-accent, #ff4756);
}

pre {
  padding: var(--space-4, 1rem);
  border-radius: var(--radius-md, 8px);
  background-color: var(--surface-card, #151820);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  overflow-x: auto;
}

pre code {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary, #f5f6f8);
}

/* 6. Lead Paragraph */
.lead-text {
  font-size: var(--text-lg, 1.125rem);
  color: var(--text-secondary, #9da3b0);
  line-height: var(--leading-relaxed, 1.75);
}

/* 7. Kelas Utilitas Warna Teks */
.text-primary {
  color: var(--text-primary, #f5f6f8);
}

.text-secondary {
  color: var(--text-secondary, #9da3b0);
}

.text-muted {
  color: var(--text-muted, #676e7d);
}

.text-accent {
  color: var(--text-accent, #ff4756);
}

/* 8. Efek Gradien Metalik pada Teks */
.text-gradient-red {
  background: var(--gradient-red-metallic);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-silver {
  background: linear-gradient(180deg, #ffffff 0%, #b0b5c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}