/* =====================================================
   PKBM MIFTAHUL ILMI
   DESIGN TOKENS
===================================================== */

:root {
  /* COLORS */

  --primary: #0f5c3a;
  --primary-light: #2f8f57;
  --primary-soft: #eaf6ef;
  --primary-dark: #0a432a;
  --secondary: #c8a75d;
  --gold: #c8a24c;

  --white: #ffffff;

  --background: #f8fcf9;
  --background-hero-mid: #f9fcfa;
  --background-hero-end: #eef7f1;
  --background-muted: #eef6f1;

  --gray-50: #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-400: #adb5bd;
  --gray-600: #495057;
  --gray-700: #3f454b;
  --gray-800: #343a40;
  --gray-900: #212529;
  --gray-500: #64748b;
  --gray-300: #cbd5e1;

  --hero-sun: #f6c453;
  --hero-sky: #0088ff;
  --hero-hill-front: #7b5e3b;
  --hero-hill-back: #55422a;
  --hero-tree: #4f8d63;
  --hero-grass-soft: #8fcb91;
  --hero-grass-dark: #4f8d63;

  --primary-alpha-08: rgba(15, 92, 58, 0.08);
  --primary-alpha-10: rgba(15, 92, 58, 0.1);
  --primary-alpha-12: rgba(15, 92, 58, 0.12);
  --primary-alpha-15: rgba(15, 92, 58, 0.15);
  --primary-alpha-18: rgba(15, 92, 58, 0.18);
  --primary-alpha-30: rgba(15, 92, 58, 0.3);
  --primary-light-alpha-08: rgba(47, 143, 87, 0.08);
  --primary-light-alpha-12: rgba(47, 143, 87, 0.12);
  --primary-light-alpha-14: rgba(47, 143, 87, 0.14);
  --primary-light-alpha-15: rgba(47, 143, 87, 0.15);
  --primary-light-alpha-25: rgba(47, 143, 87, 0.25);
  --secondary-alpha-08: rgba(200, 167, 93, 0.08);
  --secondary-alpha-35: rgba(200, 167, 93, 0.35);
  --gold-alpha-10: rgba(200, 162, 76, 0.1);
  --white-alpha-08: rgba(255, 255, 255, 0.08);
  --white-alpha-12: rgba(255, 255, 255, 0.12);
  --white-alpha-15: rgba(255, 255, 255, 0.15);
  --white-alpha-18: rgba(255, 255, 255, 0.18);
  --white-alpha-25: rgba(255, 255, 255, 0.25);
  --white-alpha-70: rgba(255, 255, 255, 0.7);
  --white-alpha-80: rgba(255, 255, 255, 0.8);
  --white-alpha-82: rgba(255, 255, 255, 0.82);
  --white-alpha-85: rgba(255, 255, 255, 0.85);
  --white-alpha-88: rgba(255, 255, 255, 0.88);
  --white-alpha-92: rgba(255, 255, 255, 0.92);
  /* TYPOGRAPHY */

  --heading-font: "Plus Jakarta Sans", sans-serif;

  --body-font: "DM Sans", sans-serif;

  --arabic-font: "Amiri", serif;

  /* CONTAINER */

  --container: 1200px;

  --container-sm: 760px;

  --container-md: 960px;

  /* RADIUS */

  --radius-sm: 12px;

  --radius-md: 18px;

  --radius-lg: 24px;

  --radius-card: 28px;

  --radius-xl: 32px;

  --radius-pill: 999px;

  --radius-round: 50%;

  /* SHADOW */

  --shadow-sm: 0 8px 20px rgba(15, 92, 58, 0.06);

  --shadow-md: 0 18px 45px rgba(15, 92, 58, 0.1);

  --shadow-lg: 0 30px 70px rgba(15, 92, 58, 0.16);

  --shadow-navbar: 0 10px 30px rgba(0, 0, 0, 0.05);

  --shadow-card-hover: 0 22px 45px rgba(15, 92, 58, 0.12);

  --shadow-mobile-menu: 0 20px 40px rgba(0, 0, 0, 0.08);

  --shadow-ring-sm: 0 0 0 4px rgba(15, 92, 58, 0.08);

  --shadow-ring-md: 0 0 0 6px rgba(15, 92, 58, 0.12);

  /* SPACING */

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5rem;
  --space-8: 6rem;
  --space-9: 7.5rem;

  /* TRANSITION */

  --duration-fast: 0.3s;
  --duration-normal: 0.35s;
  --duration-slow: 0.6s;
  --duration-reveal: 0.8s;

  --transition-fast: 0.2s ease;
  --fast: var(--transition-fast);
  --transition: 0.35s ease;
  --normal: var(--transition);
  --transition-slow: 0.6s ease;
}