/**
 * Progresif Editorial 2.0 - Design Tokens & Variables
 * Master Rebuild: Editorial First, Modern Islamic News Portal
 * 
 * Palette:
 * - Dominan Putih (#FFFFFF)
 * - Hijau Editorial (#208447) & Biru Editorial (#285D83) sebagai aksen
 * - Surface Lembut (#F5F8F6)
 * - Teks Tinta Editorial / Ink (#25332D)
 *
 * Font Stacks:
 * - Mempertahankan sistem font existing: Montserrat & Source Sans Pro
 */

:root {
  /* ==========================================================================
     1. BRAND & ACCENT COLORS (PALET 2.0)
     ========================================================================== */
  --pe-color-primary: #208447;          /* Hijau Editorial Utama (Aksen, Badge, Link Hover) */
  --pe-color-primary-hover: #166234;    /* Hijau State Hover / Active */
  --pe-color-primary-light: #e8f5ee;    /* Hijau Tint Sangat Lembut */
  --pe-color-primary-dark: #114c27;     /* Hijau Tua Kontras */

  --pe-color-secondary: #285d83;        /* Biru Editorial Sekunder (Aksen Header, Sub-menu) */
  --pe-color-secondary-hover: #1c435f;  /* Biru State Hover / Deep */
  --pe-color-secondary-tint: #ebf3f8;   /* Biru Tint Lembut */
  --pe-color-secondary-surface: #f0f5ff;/* Biru Sangat Muda (Background Infografis Editorial) */

  --pe-color-accent-bright: #208447;    /* Aksen Highlight */
  --pe-color-dark: #25332d;             /* Latar Gelap / Header Text (Ink Based) */
  --pe-color-dark-bg: #1c2622;          /* Footer Bar Background */

  /* ==========================================================================
     2. ISLAMIC PRAYER BAR & FOOTER TOKENS (FOREST GREEN & SAGE PALETTE)
     ========================================================================== */
  --pe-color-forest: #163323;           /* Hijau Tua Editorial / Deep Forest (Footer & Prayer Bar) */
  --pe-color-forest-dark: #10261a;      /* Hijau Tua Lebih Dalam (Shadow / Hover) */
  --pe-color-forest-surface: #1e422f;   /* Hijau Tua Card / Tile Surface */
  --pe-color-sage: #CADBB4;             /* Sage Green Lembut (Panel Tengah Footer Di Bruno Bros & Accent) */
  --pe-color-sage-light: #DEE7D0;       /* Sage Tint Sangat Lembut */
  --pe-color-sage-dark: #9FBA85;        /* Sage Border & Darker Accent */
  --pe-color-sage-ink: #163323;         /* Warna Teks Tinta Gelap pada Panel Sage */

  --pe-color-prayer-bg: #183628;        /* Background Prayer Bar Integrated Container */
  --pe-color-prayer-surface: #224a38;   /* Permukaan Kotak Waktu Salat */
  --pe-color-prayer-accent: #CADBB4;    /* Aksen Waktu Salat Aktif (Sage Green) */
  --pe-color-prayer-gold: #e5b96c;      /* Countdown Aksen Sekunder */
  --pe-color-prayer-text: #ffffff;      /* Teks Putih Kontras */
  --pe-color-prayer-muted: #b8ccbe;     /* Teks Sekunder Jadwal */

  /* ==========================================================================
     3. TEXT & INK COLORS (INK SYSTEM 2.0)
     ========================================================================== */
  --pe-color-ink: #25332d;              /* Deep Editorial Ink */
  --pe-color-text-main: #202b26;        /* Teks Judul & Paragraf Utama */
  --pe-color-text-body: #25332d;        /* Teks Konten Bacaan */
  --pe-color-text-secondary: #4a5a52;   /* Ringkasan (Excerpt) & Paragraf Intro */
  --pe-color-text-muted: #7d8f85;       /* Meta Data, Tanggal, Penulis */
  --pe-color-text-dim: #607268;         /* Keterangan, Caption, Subtitle */
  --pe-color-text-light: #ffffff;       /* Teks Putih Kontras */

  /* ==========================================================================
     4. SURFACES & BACKGROUNDS
     ========================================================================== */
  --pe-color-bg-body: #ffffff;          /* Putih Bersih Dominan */
  --pe-color-bg-card: #ffffff;          /* Permukaan Kartu Berita Putih */
  --pe-color-bg-alt: #f5f8f6;           /* Soft Surface Alternatif */
  --pe-color-surface-soft: #f5f8f6;     /* Section Soft Surface */
  --pe-color-surface-hover: #f8faf9;    /* Hover State Kartu */

  /* ==========================================================================
     5. BORDERS & DIVIDERS
     ========================================================================== */
  --pe-color-border: #dde5e0;          /* Garis Pemisah Artikel & Card */
  --pe-color-border-light: #eef2ef;    /* Garis Pemisah Halus */
  --pe-color-border-soft: #f2f5f3;     /* Garis List Super Halus */

  /* ==========================================================================
     6. TYPOGRAPHY SYSTEM (PLUS JAKARTA SANS 2.0 + SOURCE SERIF 4 ACCENT)
     ========================================================================== */
  --pe-font-base: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pe-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pe-font-accent: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pe-font-button: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pe-font-arabic: 'Scheherazade New', 'Amiri Quran', 'Amiri', 'Traditional Arabic', serif;
  --pe-font-sans: var(--pe-font-base);
  --pe-font-serif: var(--pe-font-accent);

  /* Typographic Hierarchy Scale */
  --pe-font-size-root: 15px;
  --pe-font-size-display: 30px;
  --pe-font-size-h1: 26px;
  --pe-font-size-h2: 20px;
  --pe-font-size-h3: 18px;
  --pe-font-size-h4: 15px;
  --pe-font-size-h5: 13px;
  --pe-font-size-h6: 12px;

  --pe-font-size-body: 14.5px;
  --pe-line-height-body: 1.65;
  --pe-font-size-lead: 16px;
  --pe-font-size-meta: 12px;
  --pe-font-size-badge: 11px;
  --pe-font-size-caption: 12px;
  --pe-font-size-arabic: 35px;
  --pe-line-height-arabic: 2.2;

  --pe-font-weight-regular: 400;
  --pe-font-weight-medium: 500;
  --pe-font-weight-semibold: 600;
  --pe-font-weight-bold: 700;

  /* ==========================================================================
     7. SPACING SCALE (4px / 8px MODULAR BASE)
     ========================================================================== */
  --pe-space-1: 4px;
  --pe-space-2: 8px;
  --pe-space-3: 12px;
  --pe-space-4: 16px;
  --pe-space-5: 20px;
  --pe-space-6: 24px;
  --pe-space-8: 32px;
  --pe-space-10: 40px;
  --pe-space-12: 48px;
  --pe-space-16: 64px;

  /* ==========================================================================
     8. LAYOUT DIMENSIONS & MOBILE GUTTERS (HOTFIX C.3.16)
     ========================================================================== */
  --pe-container-max: 1170px;
  --pe-container-wide: 1400px;
  --pe-container-padding: 15px;
  --mobile-page-gutter: 24px;
  --pe-content-width: 70.94%;
  --pe-content-gutter: 30px;
  --pe-sidebar-width: 29.06%;

  /* Component Dimensions */
  --pe-header-logo-max: 195px;
  --pe-header-banner-h: 90px;
  --pe-navbar-height: 60px;
  --pe-card-thumb-ratio: 46.25%;
  --pe-card-content-ratio: 53.75%;
  --pe-accent-line-width: 60px;

  /* ==========================================================================
     9. RADII, ELEVATIONS & TRANSITIONS
     ========================================================================== */
  --pe-radius-xs: 2px;
  --pe-radius-sm: 3px;
  --pe-radius-md: 4px;
  --pe-radius-card: 12px;
  --pe-radius-card-featured: 14px;
  --pe-radius-image: 12px;
  --pe-radius-card-compact: 10px;
  --pe-radius-round: 9999px;

  --pe-shadow-nav: 0 1px 5px rgba(37, 51, 45, 0.08);
  --pe-shadow-card: 0 2px 8px rgba(37, 51, 45, 0.04);
  --pe-shadow-card-hover: 0 4px 14px rgba(37, 51, 45, 0.08);
  --pe-shadow-dropdown: 0 4px 15px rgba(37, 51, 45, 0.09);
  --pe-transition: 0.25s ease-in-out;
}

/* =============================================================================
   10. RESPONSIVE MOBILE PAGE GUTTER SYSTEM (HOTFIX C.3.16)
   Standardized horizontal reading margin from screen edges across viewports
   ============================================================================= */
@media (max-width: 767px) {
  :root {
    --pe-container-padding: 24px;
    --mobile-page-gutter: 24px;
  }
}

@media (max-width: 430px) {
  :root {
    --pe-container-padding: 20px;
    --mobile-page-gutter: 20px;
  }
}

@media (max-width: 359px) {
  :root {
    --pe-container-padding: 16px;
    --mobile-page-gutter: 16px;
  }
}