/* Arabic Fonts Explorer 1.2 — calmer, higher-contrast visual layer */
:root {
  --afe-bg: #121310;
  --afe-surface: #1a1c18;
  --afe-surface2: #232620;
  --afe-border: #34392f;
  --afe-border2: #474d40;
  --afe-accent: #e5b85e;
  --afe-accent2: #d88f55;
  --afe-accent3: #79c99d;
  --afe-text: #f4f0e6;
  --afe-text2: #cfc8b8;
  --afe-muted: #9d978a;
}

.afe-wrap,
.afe-single-wrap { background: var(--afe-bg); color: var(--afe-text); }
.afe-wrap .afe-grid { grid-template-columns: repeat(var(--afe-columns, 2), minmax(0, 1fr)); }
@media (min-width: 701px) and (max-width: 1000px) {
  .afe-wrap[data-columns="3"] .afe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .afe-wrap .afe-grid { grid-template-columns: minmax(0, 1fr); }
}

.afe-header,
.afe-single-hero {
  background:
    radial-gradient(circle at 75% 10%, rgba(229,184,94,.14), transparent 38%),
    radial-gradient(circle at 12% 90%, rgba(121,201,157,.08), transparent 34%),
    var(--afe-surface);
}

.afe-title {
  background: linear-gradient(120deg, #f0ce83, #79c99d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.afe-badge-blue,
.afe-badge-purple,
.afe-badge-green,
.afe-badge-gold {
  color: var(--afe-text);
  background: #292c25;
  border-color: var(--afe-border2);
}
.afe-badge-blue { box-shadow: inset 3px 0 var(--afe-accent); }
.afe-badge-green { box-shadow: inset 3px 0 var(--afe-accent3); }
.afe-badge-purple { box-shadow: inset 3px 0 #b39ad9; }
.afe-badge-gold { box-shadow: inset 3px 0 var(--afe-accent2); }

.afe-bar,
.afe-cats,
.afe-cbar,
.afe-single-section,
.afe-download-cta { background: var(--afe-surface); border-color: var(--afe-border); }

.afe-card {
  cursor: pointer;
  background: var(--afe-surface);
  border-color: var(--afe-border);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.afe-card:hover {
  transform: translateY(-2px);
  background: #20231e;
  border-color: #665a3b;
  box-shadow: inset 4px 0 var(--afe-accent), 0 12px 30px rgba(0,0,0,.22);
}
.afe-card:focus-visible {
  outline: 3px solid var(--afe-accent);
  outline-offset: 3px;
}

.afe-btn-primary,
.afe-pill.active {
  background: var(--afe-accent);
  border-color: var(--afe-accent);
  color: #181810 !important;
  box-shadow: none;
}
.afe-btn-primary:hover,
.afe-pill.active:hover { background: #f0c973; color: #181810 !important; }
.afe-btn-ghost,
.afe-pill,
.afe-preview-input,
.afe-search-wrap input { background: var(--afe-surface2); border-color: var(--afe-border2); color: var(--afe-text); }
.afe-btn-ghost:hover,
.afe-pill:hover { border-color: var(--afe-accent); color: #f0ce83; }

.afe-p-sans { color: #efc66f; background: rgba(229,184,94,.1); border-color: rgba(229,184,94,.35); }
.afe-p-serif { color: #8bd3aa; background: rgba(121,201,157,.1); border-color: rgba(121,201,157,.35); }
.afe-p-display { color: #e7a17a; background: rgba(216,143,85,.1); border-color: rgba(216,143,85,.35); }
.afe-p-kufi { color: #82d7c2; background: rgba(83,185,159,.1); border-color: rgba(83,185,159,.35); }
.afe-p-mono { color: #c1a7df; background: rgba(179,154,217,.1); border-color: rgba(179,154,217,.35); }

.afe-card-footer { justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.afe-weight-list,
.afe-card-stats { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.afe-card-stats { color: var(--afe-text2); font-size: 12px; }
.afe-card-stats span,
.afe-single-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--afe-border2);
  border-radius: 999px;
  background: #292c25;
}
.afe-single-stats { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 4px; }
.afe-single-stat:first-child { color: #f0ce83; }
.afe-single-stat:last-child { color: #8bd3aa; }

.afe-section-title,
.afe-info-table a { color: #efc66f; }
.afe-code-header { background: #2c2b23; }
.afe-code-block { border-color: var(--afe-border2); }
.afe-single-nav { background: #171914; }

@media (max-width: 700px) {
  .afe-card-stats { width: 100%; }
  .afe-card-actions { width: 100%; }
  .afe-card-actions .afe-btn { flex: 1; text-align: center; }
}