/* ============================================================
   AL AWADHI — DESIGN TOKENS
   Derived from the company logo (logo.jpeg, 20 Aug 2026).
   Brand navy  #1A5786   ·  Brand amber  #F7A832
   ------------------------------------------------------------
   RULE: use LOGICAL properties everywhere (margin-inline-start,
   padding-inline-end, inset-inline-start, text-align: start).
   NEVER margin-left / padding-right / left / text-align: left.
   The Arabic (RTL) layout depends on it.  AGENTS.md §5.
   ============================================================ */

:root {
  /* ---- Brand: navy (primary) ------------------------------ */
  --navy-50:  #EEF6FC;
  --navy-100: #D4E8F7;
  --navy-200: #AAD0EE;
  --navy-300: #6EB0E3;
  --navy-400: #298BD6;
  --navy-500: #1A5786;   /* ← exact logo blue */
  --navy-600: #1B5989;
  --navy-700: #16486F;
  --navy-800: #103551;
  --navy-900: #0B2438;

  /* ---- Brand: amber (accent) ------------------------------
     ⚠ 1.98:1 on white — FAILS WCAG for body text.
     Use for CTA fills, rules, icons, highlights. Never small text. */
  --amber-50:  #FEF7EB;
  --amber-100: #FDEACE;
  --amber-200: #FCDAA7;
  --amber-300: #FAC576;
  --amber-400: #F8B44E;
  --amber-500: #F7A832;  /* ← exact logo amber */
  --amber-600: #F5970A;
  --amber-700: #C47908;
  --amber-800: #935B06;
  --amber-900: #6C4204;

  /* ---- Neutrals ------------------------------------------- */
  --ink:        #0F1725;
  --grey-900:   #1C2430;
  --grey-700:   #3D4757;
  --grey-500:   #6B7686;
  --grey-400:   #9AA3B0;
  --grey-300:   #C7CDD6;
  --grey-200:   #E2E6EC;
  --grey-100:   #F1F3F6;
  --grey-50:    #F8F9FB;
  --white:      #FFFFFF;

  /* ---- Semantic ------------------------------------------- */
  --color-text:          var(--ink);
  --color-text-muted:    var(--grey-500);
  --color-text-invert:   var(--white);
  --color-bg:            var(--white);
  --color-bg-subtle:     var(--grey-50);
  --color-bg-inverse:    var(--navy-800);
  --color-border:        var(--grey-200);
  --color-border-strong: var(--grey-300);
  --color-primary:       var(--navy-500);
  --color-primary-hover: var(--navy-700);
  --color-accent:        var(--amber-500);
  --color-accent-hover:  var(--amber-600);
  --color-focus:         var(--amber-600);
  --color-success:       #1E7A44;
  --color-warning:       var(--amber-700);
  --color-danger:        #B3261E;

  /* ---- Type ----------------------------------------------- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar:   "IBM Plex Sans Arabic", "Noto Sans Arabic", var(--font-sans);

  --text-xs:   0.8125rem;   /* 13px */
  --text-sm:   0.9375rem;   /* 15px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  --leading-tight: 1.2;
  --leading-body:  1.6;

  /* ---- Space (4px base) ----------------------------------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  /* ---- Radius / shadow / layout --------------------------- */
  --radius-sm: 3px;  --radius-md: 6px;  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(15,23,37,.06);
  --shadow-md: 0 4px 12px rgba(15,23,37,.09);
  --shadow-lg: 0 12px 32px rgba(15,23,37,.13);
  --container: 1200px;
  --transition: 160ms ease;
}

/* ---- Arabic / RTL adjustments ------------------------------
   Arabic needs slightly larger glyphs and looser leading to
   match the visual weight of Latin at the same nominal size. */
[dir="rtl"] {
  --font-sans: var(--font-ar);
  --leading-body: 1.8;
  /* Arabic ascenders and diacritics sit far above the Latin cap height.
     At 1.2 the first line of a large heading is visibly clipped. */
  --leading-tight: 1.45;
  --text-base: 1.0625rem;
}