/* ============================================================
   FEKR — Design Tokens
   All colour, typography, spacing, and motion values live here.
   ============================================================ */

:root {

  /* ── Brand palette (teal) ─────────────────────────────── */
  --brand-50:   #EDF9F8;
  --brand-100:  #DDF4F2;
  --brand-200:  #C4EDE9;
  --brand-300:  #A2DED7;
  --brand-400:  #6ACABB;
  --brand-500:  #419486;
  --brand-600:  #357C70;
  --brand-700:  #2D7368;
  --brand-800:  #1E4D46;
  --brand-900:  #0F2824;
  --brand-950:  #071412;

  /* ── Grey palette ─────────────────────────────────────── */
  --grey-50:    #F4F5F6;
  --grey-100:   #EBEDEF;
  --grey-200:   #D7DCE0;
  --grey-300:   #C0C8CE;
  --grey-400:   #ACB6BE;
  --grey-500:   #98A5AF;
  --grey-600:   #728492;
  --grey-700:   #55636D;
  --grey-800:   #3A434B;
  --grey-900:   #1D2225;
  --grey-950:   #0D1011;

  /* ── Accent palettes (used sparingly) ────────────────── */
  --green-500:  #16AF51;
  --green-100:  #C9F8DB;
  --green-700:  #0D6830;

  --orange-500: #FFD400;
  --orange-100: #FFF7CC;
  --orange-700: #998000;

  --red-500:    #E02A36;
  --red-100:    #F9D2D5;
  --red-700:    #8A141C;

  /* ── Semantic colour aliases ──────────────────────────── */
  --color-bg:           #FFFFFF;
  --color-bg-subtle:    var(--brand-50);
  --color-bg-muted:     var(--grey-50);
  --color-surface:      #FFFFFF;

  --color-text-primary:   var(--grey-900);
  --color-text-secondary: var(--grey-700);
  --color-text-muted:     var(--grey-500);
  --color-text-inverse:   #FFFFFF;

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

  --color-primary:        var(--brand-500);
  --color-primary-hover:  var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-primary-subtle: var(--brand-50);

  --color-focus:          var(--brand-500);

  --color-success:        var(--green-500);
  --color-success-bg:     var(--green-100);
  --color-error:          var(--red-500);
  --color-error-bg:       var(--red-100);

  /* ── Typography ───────────────────────────────────────── */
  --font-sans:   "Noto Sans Arabic", "Cairo", "Noto Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:   ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1.125rem;   /* 18px — large base for accessibility */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ── Spacing scale ────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:   1200px;
  --container-pad:   var(--space-6);
  --section-gap:     var(--space-24);
  --border-radius:   8px;
  --border-radius-lg:16px;
  --border-radius-xl:24px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.04);

  /* ── Motion ───────────────────────────────────────────── */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    350ms;
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.45, 0, 0.55, 1);

  /* ── Z-index scale ────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ── Min tap target ───────────────────────────────────── */
  --tap-min: 44px;
}