/* ==========================================================================
   Kayan Legal — Design Tokens
   Ported from: Kayan Legal Design System / colors_and_type.css
   Bilingual (Arabic-primary / English-secondary) marketing site
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Noto+Serif+Arabic:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* ---------- Color: surfaces ---------- */
  --kl-page:        #F8FAFC;
  --kl-page-2:      #EEF2F7;
  --kl-card:        #FFFFFF;
  --kl-ink:         #0F1F3D;

  /* ---------- Color: brand ---------- */
  --kl-teal:        #0F1F3D;
  --kl-teal-700:    #0A1530;
  --kl-teal-300:    #94A3B8;
  --kl-teal-100:    #DCE3EC;
  --kl-slate:       #708090;

  /* ---------- Color: action ---------- */
  --kl-crimson:     #B23A48;
  --kl-crimson-700: #962F3B;
  --kl-crimson-100: #F2DADD;

  /* ---------- Color: text ---------- */
  --kl-fg-1:        #0F1F3D;
  --kl-fg-2:        #5B6B82;
  --kl-fg-3:        #94A3B8;
  --kl-fg-on-dark:  #F8FAFC;

  /* ---------- Color: borders & lines ---------- */
  --kl-border:      #E2E8F0;
  --kl-border-2:    #CBD5E1;
  --kl-line-decor:  rgba(148,163,184,0.5);

  /* ---------- Color: semantic ---------- */
  --kl-success:     #2F7D5B;
  --kl-success-bg:  #E1EFE7;
  --kl-warning:     #B5751F;
  --kl-warning-bg:  #F5E9D4;
  --kl-danger:      #B23A48;
  --kl-danger-bg:   #F2DADD;
  --kl-info:        #0F1F3D;
  --kl-info-bg:     #DCE3EC;

  /* ---------- Type families ---------- */
  --kl-ar-display:  "Noto Serif Arabic", "Amiri", serif;
  --kl-ar-text:     "Cairo", "Noto Naskh Arabic", system-ui, sans-serif;
  --kl-en-display:  "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --kl-en-text:     "DM Sans", system-ui, sans-serif;
  --kl-mono:        "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---------- Type scale ---------- */
  --kl-fs-display:  56px;
  --kl-fs-h1:       48px;
  --kl-fs-h2:       32px;
  --kl-fs-h3:       22px;
  --kl-fs-h4:       18px;
  --kl-fs-body:     16px;
  --kl-fs-body-ar:  17px;
  --kl-fs-small:    14px;
  --kl-fs-micro:    12px;

  /* ---------- Line-heights ---------- */
  --kl-lh-display:   1.08;
  --kl-lh-heading:   1.18;
  --kl-lh-body:      1.6;
  --kl-lh-body-ar:   1.85;

  /* ---------- Weights ---------- */
  --kl-fw-regular:   400;
  --kl-fw-medium:    500;
  --kl-fw-semibold:  600;
  --kl-fw-bold:      700;
  --kl-fw-black:     800;

  /* ---------- Spacing scale ---------- */
  --kl-s-1:   4px;
  --kl-s-2:   8px;
  --kl-s-3:  12px;
  --kl-s-4:  16px;
  --kl-s-5:  20px;
  --kl-s-6:  24px;
  --kl-s-8:  32px;
  --kl-s-10: 40px;
  --kl-s-12: 48px;
  --kl-s-16: 64px;
  --kl-s-20: 80px;
  --kl-s-24: 96px;
  --kl-s-32: 128px;

  /* ---------- Radii ---------- */
  --kl-r-xs:   6px;
  --kl-r-sm:   8px;
  --kl-r-md:  10px;
  --kl-r-lg:  14px;
  --kl-r-xl:  16px;
  --kl-r-2xl: 22px;
  --kl-r-pill: 999px;

  /* ---------- Shadow (extremely restrained) ---------- */
  --kl-shadow-0: none;
  --kl-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
  --kl-shadow-2: 0 2px 8px rgba(28,28,28,0.05), 0 1px 2px rgba(28,28,28,0.04);

  /* ---------- Layout ---------- */
  --kl-container:      1200px;
  --kl-section-pad-y:  96px;
  --kl-nav-h:          72px;

  /* ---------- Motion ---------- */
  --kl-ease:           cubic-bezier(.2,.7,.2,1);
  --kl-ease-out:       cubic-bezier(.16,1,.3,1);
  --kl-dur-fast:       140ms;
  --kl-dur-base:       220ms;
  --kl-dur-slow:       360ms;
}

/* ==========================================================================
   Base typography — bilingual, dir-aware
   ========================================================================== */

html { box-sizing: border-box; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--kl-page);
  color: var(--kl-fg-1);
  font-family: var(--kl-ar-text);
  font-size: var(--kl-fs-body-ar);
  line-height: var(--kl-lh-body-ar);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="en"] body {
  font-family: var(--kl-en-text);
  font-size: var(--kl-fs-body);
  line-height: var(--kl-lh-body);
}

h1, h2, h3, h4 { margin: 0; }

a {
  color: var(--kl-teal);
  text-decoration: none;
  transition: opacity var(--kl-dur-fast) var(--kl-ease);
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

p { margin: 0 0 1em; }

/* LTR-lock utility */
.kl-ltr { direction: ltr; unicode-bidi: isolate; }

/* Micro label */
.kl-micro {
  font-size: var(--kl-fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kl-fg-2);
}