/* ========================================
   DESIGN TOKENS / VARIABLES
======================================== */
:root {
  /* Colors */
  --primary: #1F4F57;
  --primary-light: #2a6b75;
  --primary-dark: #163A40;
  --secondary: #3c4041;
  --accent: #00bcd4;
  --accent-warm: #ff6b35;
  --dark: #102c31;
  --text: #243033;
  --muted: #647478;
  --light: #f5fafb;
  --lighter: #eef6f7;
  --white: #ffffff;
  --border: #dcebed;

  /* Shadows */
  --shadow-xs: 0 2px 8px rgba(31, 79, 87, 0.04);
  --shadow-sm: 0 4px 14px rgba(31, 79, 87, 0.06);
  --shadow: 0 18px 45px rgba(31, 79, 87, 0.12);
  --shadow-lg: 0 28px 60px rgba(31, 79, 87, 0.18);

  /* Radius */
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 32px;
  --radius-full: 999px;

  /* Transition */
  --ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Font */
  --font-main: "Poppins", sans-serif;
  --font-heading: "Audiowide", sans-serif;
  --font-arabic: "Tajawal", sans-serif;
}