/* =====================================================
   custom.css — مبني من Tokens Studio (JSON) ومناسب لـ Bootstrap 5
   - كل القيم محسوبة (px/em) بدون معادلات
   - ضعه بعد bootstrap.min.css / bootstrap.rtl.min.css
===================================================== */

/* ===============================
   1) Tokens → CSS Variables
=============================== */
:root{
  /* Colors */
  --color-black:#000000; --color-white:#ffffff;

  --color-gray-100:#f7fafc; --color-gray-200:#edf2f7; --color-gray-300:#e2e8f0;
  --color-gray-400:#cbd5e0; --color-gray-500:#a0aec0; --color-gray-600:#718096;
  --color-gray-700:#4a5568; --color-gray-800:#2d3748; --color-gray-900:#1a202c;

  --color-red-100:#fff5f5; --color-red-200:#fed7d7; --color-red-300:#feb2b2; --color-red-400:#fc8181;
  --color-red-500:#f56565; --color-red-600:#e53e3e; --color-red-700:#c53030; --color-red-800:#9b2c2c; --color-red-900:#742a2a;

  --color-orange-100:#fffaf0; --color-orange-200:#feebc8; --color-orange-300:#fbd38d; --color-orange-400:#f6ad55;
  --color-orange-500:#ed8936; --color-orange-600:#dd6b20; --color-orange-700:#c05621; --color-orange-800:#9c4221; --color-orange-900:#7b341e;

  --color-yellow-100:#fffff0; --color-yellow-200:#fefcbf; --color-yellow-300:#faf089; --color-yellow-400:#f6e05e;
  --color-yellow-500:#ecc94b; --color-yellow-600:#d69e2e; --color-yellow-700:#b7791f; --color-yellow-800:#975a16; --color-yellow-900:#744210;

  --color-green-100:#f0fff4; --color-green-200:#c6f6d5; --color-green-300:#9ae6b4; --color-green-400:#68d391;
  --color-green-500:#48bb78; --color-green-600:#38a169; --color-green-700:#2f855a; --color-green-800:#276749; --color-green-900:#22543d;

  --color-teal-100:#e6fffa; --color-teal-200:#b2f5ea; --color-teal-300:#81e6d9; --color-teal-400:#4fd1c5;
  --color-teal-500:#38b2ac; --color-teal-600:#319795; --color-teal-700:#2c7a7b; --color-teal-800:#285e61; --color-teal-900:#234e52;

  --color-blue-100:#ebf8ff; --color-blue-200:#bee3f8; --color-blue-300:#90cdf4; --color-blue-400:#63b3ed;
  --color-blue-500:#4299e1; --color-blue-600:#3182ce; --color-blue-700:#2b6cb0; --color-blue-800:#2c5282; --color-blue-900:#2a4365;

  --color-indigo-100:#ebf4ff; --color-indigo-200:#c3dafe; --color-indigo-300:#a3bffa; --color-indigo-400:#7f9cf5;
  --color-indigo-500:#667eea; --color-indigo-600:#5a67d8; --color-indigo-700:#4c51bf; --color-indigo-800:#434190; --color-indigo-900:#3c366b;

  --color-purple-100:#faf5ff; --color-purple-200:#e9d8fd; --color-purple-300:#d6bcfa; --color-purple-400:#b794f4;
  --color-purple-500:#9f7aea; --color-purple-600:#805ad5; --color-purple-700:#6b46c1; --color-purple-800:#553c9a; --color-purple-900:#44337a;

  --color-pink-100:#fff5f7; --color-pink-200:#fed7e2; --color-pink-300:#fbb6ce; --color-pink-400:#f687b3;
  --color-pink-500:#ed64a6; --color-pink-600:#d53f8c; --color-pink-700:#b83280; --color-pink-800:#97266d; --color-pink-900:#702459;

  /* Dimensions & Spacing (xs=4, scale=2 → sm=8, md=16, lg=32, xl=64) */
  --dimension-xs:4px; --dimension-sm:8px; --dimension-md:16px; --dimension-lg:32px; --dimension-xl:64px;

  --spacing-xs:4px; --spacing-sm:8px; --spacing-md:16px; --spacing-lg:32px; --spacing-xl:64px;
  --spacing-multi:8px 64px; /* {sm} {xl} */

  /* Radius */
  --radius-sm:4px; --radius-lg:8px; --radius-xl:16px; --radius-multi:4px 8px;

  /* Opacity (unitless) */
  --opacity-low:.10; --opacity-md:.50; --opacity-high:.90;

  /* Typography families */
  --font-family-heading:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-family-body:'Roboto',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* Font sizes (px, 16*1.25^n) */
  --font-size-body:16px; --font-size-sm:14px; --font-size-xs:10px;
  --font-size-h6:16px; --font-size-h5:20px; --font-size-h4:25px;
  --font-size-h3:31px; --font-size-h2:39px; --font-size-h1:49px;

  /* Weights */
  --font-weight-heading-regular:400; --font-weight-heading-bold:700;
  --font-weight-body-regular:400; --font-weight-body-bold:700;

  /* Line heights (unitless) */
  --line-height-heading:1.10; --line-height-body:1.40;

  /* Letter spacing (em) */
  --letter-spacing-default:0em;
  --letter-spacing-increased:1.5em;   /* 150% */
  --letter-spacing-decreased:-0.05em; /* -5% */

  /* Paragraph spacing (px) */
  --paragraph-spacing-h1:32px; --paragraph-spacing-h2:26px;
}

/* ===============================
   2) Bootstrap Bridge (ألوان/مسافات/Radius)
=============================== */
:root{
  --bs-primary:var(--color-blue-600);
  --bs-secondary:var(--color-gray-600);
  --bs-success:var(--color-green-600);
  --bs-info:var(--color-teal-600);
  --bs-warning:var(--color-yellow-600);
  --bs-danger:var(--color-red-600);

  --bs-body-bg:var(--color-white);
  --bs-body-color:var(--color-gray-900);
  --bs-border-color:var(--color-gray-300);
  --bs-link-color:var(--bs-primary);
  --bs-link-hover-color:var(--color-blue-700);

  --bs-border-radius:var(--radius-lg);
  --bs-border-radius-sm:var(--radius-sm);
  --bs-border-radius-lg:var(--radius-xl);
  --bs-border-radius-xl:calc(var(--radius-xl) + 4px);
}

/* ===============================
   3) Base & Typography
=============================== */
body{
  font-family:var(--font-family-body);
  font-size:var(--font-size-body);
  line-height:var(--line-height-body);
  color:var(--bs-body-color);
  background:var(--bs-body-bg);
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);line-height:var(--line-height-heading);margin:0 0 .5em}
h1{font-size:var(--font-size-h1);margin-bottom:var(--paragraph-spacing-h1)}
h2{font-size:var(--font-size-h2);margin-bottom:var(--paragraph-spacing-h2)}
h3{font-size:var(--font-size-h3)} h4{font-size:var(--font-size-h4)} h5{font-size:var(--font-size-h5)} h6{font-size:var(--font-size-h6)}

/* ===============================
   4) Navbar & Dropdown
=============================== */
.navbar{border-bottom:1px solid var(--bs-border-color)}
.navbar-light.bg-light{background-color:var(--color-gray-100)!important}
.navbar-brand img{max-height:40px;inline-size:auto}
.nav-link.active{position:relative}
.nav-link.active::after{content:"";position:absolute;inset-inline:0;inset-block-end:-6px;height:2px;background:var(--bs-primary)}
.rtl-navbar .dropdown-menu{text-align:right}
.dropdown-menu{border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);background:var(--color-white)}
.dropdown-item.active,.dropdown-item:active{background-color:var(--bs-primary)}

/* ===============================
   5) Buttons
=============================== */
.btn{border-radius:var(--bs-border-radius)}
.btn-primary{
  --bs-btn-bg:var(--bs-primary);
  --bs-btn-border-color:var(--bs-primary);
  --bs-btn-hover-bg:var(--color-blue-700);
  --bs-btn-hover-border-color:var(--color-blue-700);
  --bs-btn-active-bg:var(--color-blue-700);
  --bs-btn-active-border-color:var(--color-blue-700);
}

/* ===============================
   6) Forms
=============================== */
.form-control,.form-select,.form-check-input{border-radius:var(--bs-border-radius)}
.form-control:focus,.form-select:focus{
  border-color:var(--bs-primary);
  box-shadow:0 0 0 .25rem rgba(49,130,206,.25); /* blue-600 */
}
.form-text{color:var(--color-gray-600)}

/* ===============================
   7) Cards / Tables / Alerts / Badges / Pagination
=============================== */
.card{border-radius:var(--bs-border-radius);border-color:var(--bs-border-color);background:var(--color-white);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.card-header{background:var(--color-gray-100);border-bottom-color:var(--bs-border-color)}

.table{--bs-table-border-color:var(--bs-border-color)}
.table-hover>tbody>tr:hover{background:var(--color-gray-100)}

.alert{border-radius:var(--bs-border-radius)}
.alert-primary{--bs-alert-bg:color-mix(in oklab,var(--bs-primary) 12%,white);--bs-alert-border-color:var(--bs-primary);--bs-alert-color:var(--color-blue-800)}
.alert-success{--bs-alert-bg:color-mix(in oklab,var(--bs-success) 12%,white);--bs-alert-border-color:var(--bs-success);--bs-alert-color:var(--color-green-800)}
.alert-warning{--bs-alert-bg:color-mix(in oklab,var(--bs-warning) 20%,white);--bs-alert-border-color:var(--bs-warning);--bs-alert-color:var(--color-yellow-900)}
.alert-danger{ --bs-alert-bg:color-mix(in oklab,var(--bs-danger) 12%,white); --bs-alert-border-color:var(--bs-danger); --bs-alert-color:var(--color-red-800)}

.badge{border-radius:999px}
.pagination .page-link{border-radius:var(--bs-border-radius)}

/* ===============================
   8) Modals / Offcanvas / Toasts
=============================== */
.modal-content{border-radius:var(--bs-border-radius-lg);box-shadow:0 6px 24px rgba(0,0,0,.10)}
.offcanvas{background:var(--color-white)}
.toast{border-radius:var(--bs-border-radius)}

/* ===============================
   9) Utilities (من الـ Tokens)
=============================== */
.p-xs{padding:var(--spacing-xs)!important} .p-sm{padding:var(--spacing-sm)!important} .p-md{padding:var(--spacing-md)!important} .p-lg{padding:var(--spacing-lg)!important} .p-xl{padding:var(--spacing-xl)!important}
.m-xs{margin:var(--spacing-xs)!important}  .m-sm{margin:var(--spacing-sm)!important}  .m-md{margin:var(--spacing-md)!important}  .m-lg{margin:var(--spacing-lg)!important}  .m-xl{margin:var(--spacing-xl)!important}
.px-xs{padding-inline:var(--spacing-xs)!important} .px-sm{padding-inline:var(--spacing-sm)!important} .px-md{padding-inline:var(--spacing-md)!important} .px-lg{padding-inline:var(--spacing-lg)!important} .px-xl{padding-inline:var(--spacing-xl)!important}
.py-xs{padding-block:var(--spacing-xs)!important}  .py-sm{padding-block:var(--spacing-sm)!important}  .py-md{padding-block:var(--spacing-md)!important}  .py-lg{padding-block:var(--spacing-lg)!important}  .py-xl{padding-block:var(--spacing-xl)!important}
.gap-xs{gap:var(--spacing-xs)!important} .gap-sm{gap:var(--spacing-sm)!important} .gap-md{gap:var(--spacing-md)!important} .gap-lg{gap:var(--spacing-lg)!important} .gap-xl{gap:var(--spacing-xl)!important}

.ls-default{letter-spacing:var(--letter-spacing-default)!important}
.ls-up{letter-spacing:var(--letter-spacing-increased)!important}
.ls-down{letter-spacing:var(--letter-spacing-decreased)!important}

.opacity-low{opacity:var(--opacity-low)!important}
.opacity-md{opacity:var(--opacity-md)!important}
.opacity-high{opacity:var(--opacity-high)!important}

.bg-surface{background:var(--color-gray-100)!important}
#notify-wrapper{border-radius:var(--bs-border-radius)}