/* ============================================================
   Khutowat Academy — Colors & Typography
   Premium step-by-step learning. Bilingual (RTL primary).
   ============================================================ */

/* Webfonts — Plus Jakarta Sans (Latin), Tajawal (Arabic),
   Instrument Serif (italic accent), JetBrains Mono (mono).
   NOTE: Substituted from Google Fonts — flag to user if a
   bespoke Khutowat face exists. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=Tajawal:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand colors (lifted from logo) ───────────────────── */
  --kh-navy-deep: #0F1A33;   /* logo background, darkest */
  --kh-navy:      #1B2A4E;   /* primary brand navy */
  --kh-navy-700:  #27395F;
  --kh-navy-500:  #3B4D74;
  --kh-cream:     #F7F1E1;   /* logo light bg, page canvas */
  --kh-cream-2:   #EFE7D2;   /* secondary cream surface */
  --kh-paper:     #FBF6E8;   /* lightest cream */

  /* The three rising step bars */
  --kh-saffron:   #F4C13D;   /* top step (highest) */
  --kh-teal:      #3FB6A8;   /* middle step */
  --kh-coral:     #F08762;   /* bottom step */

  /* Ink + neutrals */
  --kh-ink:       #1A1A2E;
  --kh-muted:     #6B6F82;
  --kh-line:      rgba(27, 42, 78, 0.12);
  --kh-line-soft: rgba(27, 42, 78, 0.06);

  /* ── Semantic ──────────────────────────────────────────── */
  --kh-bg:        var(--kh-cream);
  --kh-surface:   var(--kh-paper);
  --kh-surface-2: var(--kh-cream-2);
  --kh-fg:        var(--kh-ink);
  --kh-fg-2:      var(--kh-navy);
  --kh-fg-muted:  var(--kh-muted);
  --kh-on-dark:   var(--kh-cream);
  --kh-accent:    var(--kh-coral);
  --kh-success:   var(--kh-teal);
  --kh-warning:   var(--kh-saffron);
  --kh-danger:    #D85A3A;

  /* ── Type families ─────────────────────────────────────── */
  --kh-sans:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --kh-serif:  'Instrument Serif', 'Times New Roman', Georgia, serif;
  --kh-arabic: 'Tajawal', 'Plus Jakarta Sans', sans-serif;
  --kh-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale (px) ──────────────────────────────────── */
  --kh-fs-xs:   11px;
  --kh-fs-sm:   13px;
  --kh-fs-md:   15px;
  --kh-fs-lg:   18px;
  --kh-fs-xl:   22px;
  --kh-fs-2xl:  30px;
  --kh-fs-3xl:  42px;
  --kh-fs-4xl:  64px;
  --kh-fs-5xl:  84px;

  /* ── Tracking ─────────────────────────────────────────── */
  --kh-track-display: -0.025em;
  --kh-track-body:    -0.005em;
  --kh-track-eyebrow:  0.14em;

  /* ── Spacing (4-step) ─────────────────────────────────── */
  --kh-s-1:  4px;
  --kh-s-2:  8px;
  --kh-s-3:  12px;
  --kh-s-4:  16px;
  --kh-s-5:  20px;
  --kh-s-6:  24px;
  --kh-s-8:  32px;
  --kh-s-10: 40px;
  --kh-s-12: 48px;
  --kh-s-16: 64px;
  --kh-s-20: 80px;

  /* ── Radii — pill-rectangles like the step bars ───────── */
  --kh-r-xs:   6px;
  --kh-r-sm:   10px;
  --kh-r-md:   14px;
  --kh-r-lg:   20px;
  --kh-r-xl:   28px;
  --kh-r-pill: 999px;

  /* ── Shadows — soft, warm, never harsh ────────────────── */
  --kh-shadow-1: 0 1px 2px rgba(15, 26, 51, 0.06);
  --kh-shadow-2: 0 4px 12px rgba(15, 26, 51, 0.08);
  --kh-shadow-3: 0 12px 32px rgba(15, 26, 51, 0.12);
  --kh-shadow-elev: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 40px rgba(0,0,0,.18);

  /* ── Motion ───────────────────────────────────────────── */
  --kh-ease:        cubic-bezier(0.3, 0.7, 0.4, 1);
  --kh-ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --kh-dur-fast:    120ms;
  --kh-dur:         180ms;
  --kh-dur-slow:    320ms;
}

/* ── Semantic typography classes ─────────────────────────── */
html, body { font-family: var(--kh-sans); color: var(--kh-fg); background: var(--kh-bg); }
[dir="rtl"] body, .kh-arabic { font-family: var(--kh-arabic); }

.kh-display, .kh-h1 {
  font-family: var(--kh-sans);
  font-weight: 700;
  font-size: var(--kh-fs-5xl);
  line-height: 1.02;
  letter-spacing: var(--kh-track-display);
  color: var(--kh-navy-deep);
}
.kh-h2 {
  font-weight: 700; font-size: var(--kh-fs-3xl); line-height: 1.05;
  letter-spacing: var(--kh-track-display); color: var(--kh-navy-deep);
}
.kh-h3 {
  font-weight: 600; font-size: var(--kh-fs-2xl); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--kh-navy-deep);
}
.kh-h4 {
  font-weight: 600; font-size: var(--kh-fs-xl); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--kh-navy-deep);
}
.kh-body {
  font-weight: 400; font-size: var(--kh-fs-md); line-height: 1.55;
  color: var(--kh-fg-2);
}
.kh-body-sm {
  font-weight: 400; font-size: var(--kh-fs-sm); line-height: 1.5;
  color: var(--kh-fg-muted);
}
.kh-eyebrow {
  font-weight: 600; font-size: var(--kh-fs-xs);
  text-transform: uppercase; letter-spacing: var(--kh-track-eyebrow);
  color: var(--kh-fg-muted);
}
.kh-serif {
  font-family: var(--kh-serif); font-style: italic;
  font-weight: 400; letter-spacing: -0.015em;
}
.kh-mono {
  font-family: var(--kh-mono); letter-spacing: -0.01em;
}