/* ================================================================
   tokens.css — design tokens (the single source of truth)
   Brand: clinic desk — كلينك ديسك
   Colours derive from the logo: medical blue, deep navy, amber.
   Emerald is the "action / money / ownership" colour from the brief.
   ================================================================ */

:root {
  /* ---- Brand palette -------------------------------------------------- */
  /* Medical blue (logo .cls-1) */
  --blue-50:  #e6f6ff;
  --blue-100: #cceeff;
  --blue-200: #99dcff;
  --blue-300: #66caff;
  --blue-400: #33b4fe;
  --blue-500: #009ffd;   /* primary */
  --blue-600: #0a82d6;
  --blue-700: #0f66a8;

  /* Deep navy (logo .cls-4) */
  --navy-400: #4a4aa0;
  --navy-500: #36368a;
  --navy-600: #2a2a72;   /* brand navy */
  --navy-700: #20205a;
  --navy-800: #161642;
  --navy-900: #0d0d2b;

  /* Amber (logo .cls-3) */
  --amber-300: #ffc04d;
  --amber-400: #ffb01f;
  --amber-500: #ffa400;  /* accent */
  --amber-600: #e08c00;

  /* Emerald — ownership / primary action */
  --emerald-50:  #e7f9f1;
  --emerald-100: #c5f0dd;
  --emerald-300: #6dd9aa;
  --emerald-400: #28c389;
  --emerald-500: #0fb67a;
  --emerald-600: #0a9a66;
  --emerald-700: #087a51;

  /* Neutrals */
  --white:    #ffffff;
  --gray-25:  #fbfcfe;
  --gray-50:  #f4f7fb;
  --gray-100: #eaeff6;
  --gray-200: #dbe3ee;
  --gray-300: #c3cedd;
  --gray-400: #97a4b8;
  --gray-500: #6b7889;
  --gray-600: #4d5867;
  --gray-700: #374050;
  --gray-800: #232b38;
  --gray-900: #141923;

  /* Semantic */
  --danger-500: #e5484d;
  --danger-50:  #fdeaea;

  /* ---- Semantic role mapping ----------------------------------------- */
  --color-primary:        var(--blue-500);
  --color-primary-dark:   var(--blue-700);
  --color-navy:           var(--navy-600);
  --color-accent:         var(--amber-500);
  --color-action:         var(--emerald-500);
  --color-action-dark:    var(--emerald-600);

  --color-bg:             var(--white);
  --color-bg-alt:         var(--gray-50);
  --color-bg-navy:        var(--navy-700);
  --color-surface:        var(--white);

  --color-text:           var(--navy-900);
  --color-text-muted:     var(--gray-600);
  --color-text-soft:      var(--gray-500);
  --color-text-invert:    var(--white);
  --color-heading:        var(--navy-700);

  --color-border:         var(--gray-200);
  --color-border-strong:  var(--gray-300);

  /* ---- Typography ----------------------------------------------------- */
  --font-base: "Bahij TheSans Arabic", system-ui, -apple-system,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --fw-extralight: 200;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-bold:       700;
  --fw-black:      900;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-xs:   0.8125rem;                              /* 13px */
  --fs-sm:   0.9375rem;                              /* 15px */
  --fs-base: 1.0625rem;                              /* 17px */
  --fs-md:   1.1875rem;                              /* 19px */
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-2xl:  clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-3xl:  clamp(2.3rem, 1.7rem + 3vw, 3.75rem);
  --fs-hero: clamp(2.8rem, 2rem + 4.2vw, 5rem);

  --lh-tight: 1.18;
  --lh-snug:  1.4;
  --lh-base:  1.85;

  /* ---- Spacing scale -------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  --section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);

  /* ---- Layout --------------------------------------------------------- */
  --container:      1200px;
  --container-narrow: 880px;
  --header-h:       76px;

  /* ---- Radii ---------------------------------------------------------- */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ---- Borders (always full, never one-sided as decoration) ----------- */
  --border-hair:  1px solid var(--color-border);
  --border-soft:  1.5px solid var(--color-border);
  --border-strong: 2px solid var(--color-border-strong);

  /* ---- Shadows -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 25, 35, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 25, 35, 0.06);
  --shadow:    0 8px 24px rgba(20, 25, 35, 0.08);
  --shadow-md: 0 14px 38px rgba(20, 25, 35, 0.10);
  --shadow-lg: 0 28px 64px rgba(20, 25, 35, 0.14);
  --shadow-blue: 0 16px 40px rgba(0, 159, 253, 0.22);
  --shadow-emerald: 0 14px 34px rgba(15, 182, 122, 0.28);

  /* ---- Gradients ------------------------------------------------------ */
  --grad-hero: radial-gradient(1200px 700px at 85% -10%, rgba(0,159,253,0.12), transparent 60%),
               radial-gradient(900px 600px at 0% 110%, rgba(15,182,122,0.10), transparent 55%),
               linear-gradient(180deg, #f7fbff 0%, #ffffff 55%, #f4f9f7 100%);
  --grad-navy: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-600) 45%, var(--blue-700) 100%);
  --grad-blue: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  --grad-emerald: linear-gradient(135deg, var(--emerald-400), var(--emerald-600));
  --grad-accent: linear-gradient(135deg, var(--amber-400), var(--amber-600));

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t:      240ms;
  --t-slow: 420ms;

  --z-header: 1000;
  --z-mobilebar: 1100;
  --z-modal: 2000;
}