/* ⚠ ملف مُولَّد آليًا من config.json — لا تعدّله يدويًا. عدّل config.json ثم: npm run build */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700;900&display=swap');

:root{
  /* ---- الألوان ---- */
  --ink: #1a0f0a;
  --ink-soft: #5c4a42;
  --ink-muted: #9b8a80;
  --paper: #fff8f0;
  --card: #ffffff;
  --line: #f0ddcd;
  --accent: #ff2e17;
  --accent-hot: #ff7a00;
  --amber: #ffb800;
  --teal: #00c2a8;
  --violet: #7b3fe4;
  --pink: #ff2d78;

  /* ---- تدرّج الهوية ---- */
  --brand-grad: linear-gradient(115deg, #ff2e17, #ff7a00, #ffb800);

  /* ---- الخطوط ---- */
  --font-display: 'Amiri', 'Traditional Arabic', 'Times New Roman', serif;
  --font-ui: 'Cairo', 'Segoe UI', Tahoma, sans-serif;

  /* ---- أحجام الخط ---- */
  --fs-body: 1rem;
  --fs-ui: 0.86rem;
  --fs-meta: 0.8rem;
  --fs-tag: 0.68rem;
  --fs-lead: 1.32rem;
  --fs-article-body: 1.18rem;
  --fs-post-title: clamp(1.7rem, 4.2vw, 2.5rem);
  --fs-page-title: clamp(1.9rem, 5vw, 2.75rem);
  --fs-section-heading: 1.9rem;
  --fs-card-title: 1.5rem;
  --fs-rank-excerpt: 0.94rem;
  --fs-slide-title: clamp(1.3rem, 3.3vw, 2.05rem);
  --fs-brand: 1.45rem;
  --fs-tagline: 1.35rem;

  /* ---- الزوايا والظلال والعرض ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(90,30,10,.08);
  --shadow-md: 0 10px 30px rgba(90,30,10,.13);
  --shadow-lg: 0 20px 55px rgba(90,30,10,.20);
  --max-page: 900px;
  --max-reading: 820px;
  --max-post: 780px;

  /* ---- أبعاد التخطيط ---- */
  --carousel-height: clamp(240px, 44vh, 480px);
  --hero-height: min(clamp(130px, 21vh, 240px), 27.7vw);
  --hero-focus: center 59%;
  --hero-logo-size: clamp(72px, 10.5vw, 118px);
  --hero-logo-overhang: 0.2;

  /* ---- الحركة ---- */
  --reveal-distance: 28px;
  --reveal-duration: 0.7s;
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.36,.64,1);
  --slide-duration: 0.62s;

  /* ---- ألوان الأنواع (خيالي / حقيقي) ---- */
  --kind-fake: #ff2e17;
  --kind-fake-text: #ffffff;
  --kind-real: #1a0f0a;
  --kind-real-text: #ffffff;

  /* ---- ألوان الأقسام ---- */
  --sec-politics: #00a98f;
  --sec-politics-grad: linear-gradient(135deg, #00c2a8, #006f5f);
  --sec-sport: #7b3fe4;
  --sec-sport-grad: linear-gradient(135deg, #9d5cff, #5a1fc0);
  --sec-economy: #ff9500;
  --sec-economy-grad: linear-gradient(135deg, #ffb800, #e06a00);
  --sec-society: #ff2d78;
  --sec-society-grad: linear-gradient(135deg, #ff2d78, #c2004f);
}

html{ font-size:16px; }

.kind-badge[data-kind="fake"]{ background:var(--kind-fake); color:var(--kind-fake-text); }
.kind-tab[data-kind="fake"].active{ background:var(--kind-fake); color:var(--kind-fake-text); border-color:var(--kind-fake); }
.kind-badge[data-kind="real"]{ background:var(--kind-real); color:var(--kind-real-text); }
.kind-tab[data-kind="real"].active{ background:var(--kind-real); color:var(--kind-real-text); border-color:var(--kind-real); }
.section-tag[data-sec="politics"]{ background:var(--sec-politics); }
.tint[data-sec="politics"], [data-sec="politics"] > .tint{ background:var(--sec-politics-grad); }
.article-card[data-section="politics"]::before{ background:var(--sec-politics); }
.tab[data-key="politics"].active{ background:var(--sec-politics-grad); box-shadow:0 8px 22px #00a98f66; }
.section-tag[data-sec="sport"]{ background:var(--sec-sport); }
.tint[data-sec="sport"], [data-sec="sport"] > .tint{ background:var(--sec-sport-grad); }
.article-card[data-section="sport"]::before{ background:var(--sec-sport); }
.tab[data-key="sport"].active{ background:var(--sec-sport-grad); box-shadow:0 8px 22px #7b3fe466; }
.section-tag[data-sec="economy"]{ background:var(--sec-economy); }
.tint[data-sec="economy"], [data-sec="economy"] > .tint{ background:var(--sec-economy-grad); }
.article-card[data-section="economy"]::before{ background:var(--sec-economy); }
.tab[data-key="economy"].active{ background:var(--sec-economy-grad); box-shadow:0 8px 22px #ff950066; }
.section-tag[data-sec="society"]{ background:var(--sec-society); }
.tint[data-sec="society"], [data-sec="society"] > .tint{ background:var(--sec-society-grad); }
.article-card[data-section="society"]::before{ background:var(--sec-society); }
.tab[data-key="society"].active{ background:var(--sec-society-grad); box-shadow:0 8px 22px #ff2d7866; }