/* ==========================================================================
   THE CURRENT — Design Tokens
   All colors, typography, spacing, and sizing values live here.
   Nothing is hardcoded elsewhere. Change one line, change the whole system.
   ========================================================================== */

:root {
  /* ---- Colors: Inherited (unchanged from Path to Water) ---- */
  --bg: #faf8f4;
  --bg-section: #ffffff;
  --bg-aside: #f5f1eb;
  --text: #2c2a26;
  --text-light: #6b6560;
  --gold: #c49b3c;             /* RESERVED: Quranic content only */
  --gold-light: #f2e8cc;       /* Quran block background — deepened for prominence */

  /* ---- Colors: Evolved ---- */
  --accent: #1b6b5a;           /* Teal-green — forest becomes river */
  --accent-hover: #15554a;     /* Darker accent for hover states */
  --accent-light: #f0f6f4;     /* Light tint — softened so hadith block defers to ayah */

  /* ---- Colors: New ---- */
  --accent-structure: #3d5a73; /* Blue-slate — table headers, opinion block headers */
  --accent-structure-hover: #2f4a61;
  --accent-structure-light: #eaeff4; /* Light tint for step circles, chart titles, nav groups */
  --accent-structure-mid: #6889a3;   /* 60% intensity for secondary structural elements */

  /* ---- Colors: Reflection box (distinct from ayah block) ---- */
  --bg-reflect: #f7f2ea;       /* Warm gray-cream — between bg-aside and gold-light */

  /* ---- Colors: Badge ---- */
  --badge-bg: #fef3e2;
  --badge-border: #e8a020;
  --badge-text: #a06010;

  /* ---- Colors: Utility ---- */
  --border: #e0ddd7;           /* Default borders */
  --border-light: #ece9e3;     /* Lighter borders for nested elements */
  --shadow: rgba(44, 42, 38, 0.06);

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;

  --text-base: 1.0625rem;     /* 17px */
  --text-sm: 0.875rem;        /* 14px */
  --text-xs: 0.8125rem;       /* 13px */
  --text-lg: 1.125rem;        /* 18px */

  --heading-1: 2.25rem;       /* 36px */
  --heading-2: 1.625rem;      /* 26px */
  --heading-3: 1.375rem;      /* 22px — increased from 20px for better differentiation */
  --heading-4: 1.0625rem;     /* 17px */

  --line-height-body: 1.7;
  --line-height-heading: 1.3;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;        /* 4px */
  --space-sm: 0.5rem;         /* 8px */
  --space-md: 1rem;           /* 16px */
  --space-lg: 1.25rem;        /* 20px — tightened from 24px for block rhythm */
  --space-xl: 2.5rem;         /* 40px */
  --space-2xl: 3.5rem;        /* 56px — increased for section breathing room */

  /* ---- Layout ---- */
  --content-max-width: 42rem; /* ~672px — optimal reading width */
  --page-max-width: 72rem;    /* 1152px — outer container */
  --page-padding: 1.25rem;    /* 20px mobile */
  --border-radius: 4px;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ---- Mobile overrides ---- */
@media (max-width: 768px) {
  :root {
    --text-base: 1rem;         /* 16px on mobile */
    --heading-1: 1.75rem;      /* 28px */
    --heading-2: 1.375rem;     /* 22px */
    --heading-3: 1.125rem;     /* 18px */
    --page-padding: 1rem;      /* 16px */
  }
}

/* ---- Desktop spacing ---- */
@media (min-width: 1024px) {
  :root {
    --page-padding: 2rem;
  }
}