@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

:root {
  --navy-900: #0F1B2D;
  --navy-700: #1E3A5F;
  --navy-500: #2D5180;
  --amber: #F5A623;
  --amber-light: #FFF3D6;
  --amber-dark: #D4900A;

  --bg-page: #F2F4F8;
  --bg-card: #FFFFFF;
  --bg-soft: #F7F9FC;

  --text-primary: #0F1B2D;
  --text-secondary: #5A6B85;
  --text-muted: #93A1B8;

  --border-color: #E6EBF2;

  --success: #2ECC71;
  --success-bg: #E8FFF2;
  --success-text: #0F6E56;

  --danger: #E24B4A;
  --danger-bg: #FCE8E8;
  --danger-text: #A32D2D;

  --warning: #F5A623;
  --warning-bg: #FFF3D6;
  --warning-text: #854F0B;

  --info: #1E88E5;
  --info-bg: #E6F4FF;
  --info-text: #0C447C;

  --purple: #7F77DD;
  --purple-bg: #F3E6FF;
  --purple-text: #534AB7;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --navbar-h: 76px;

  --shadow-sm: 0 1px 3px rgba(15,27,45,0.06);
  --shadow-md: 0 4px 16px rgba(15,27,45,0.08);
  --shadow-lg: 0 12px 32px rgba(15,27,45,0.12);
}