/* =========================================
   CSS Variables - SulamProject Design System
   ========================================= 
   Islamic / Nature Green Palette
   ========================================= */
:root {
  /* Core Colors - Islamic / Nature green palette */
  --bg: #ffffff; /* page background */
  --card: #0a2e21; /* very dark green for panels */
  --accent: #0f8a5f; /* primary accent (vibrant natural green) */
  --accent-hover: #0d7550; /* darker green for hover state */
  --muted: #4b7660; /* muted green/gray for secondary text */
  --btn-text: #ffffff;
  --text-primary: #083f2f; /* deep green for main text */
  --border-subtle: rgba(6,46,29,0.06);

  /* Modern card background: clean white surface */
  --card-bg: #ffffff; /* clean white background for cards */
  --card-border: rgba(6,95,70,0.08); /* subtle but clearer green border */

  /* Shadows (neutral) */
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.12);
  --shadow-md: 0 10px 24px rgba(0,0,0,0.16);
  --shadow-lg: 0 14px 36px rgba(0,0,0,0.18);

  /* Sidebar theme */
  --sidebar-bg: #07291f; /* dark, forest-like panel */
  --sidebar-border: rgba(255,255,255,0.03);
  --sidebar-link: #dfeee6; /* light green-ish for links */
  --sidebar-link-hover-bg: rgba(15,138,95,0.08);
  --sidebar-active-bg: rgba(15,138,95,0.16); /* accent tint */
  --sidebar-active-text: #ffffff;
}