/* ============================================================
   Design Tokens — Harari Knowledge Platform
   Style: Modern Ed-Tech (cool indigo/blue, sans-serif, cards)
   ============================================================ */

:root {
  /* ---- Brand / Primary (Indigo) ---- */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  /* ---- Accent (Sky / Cyan) ---- */
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;

  /* ---- Semantic ---- */
  --success: #10b981;
  --success-soft: #d1fae5;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --danger:  #ef4444;
  --danger-soft:  #fee2e2;
  --info:    #3b82f6;
  --info-soft:    #dbeafe;

  /* ---- Neutrals ---- */
  --gray-0:   #ffffff;
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-150: #eef2f7;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ---- Surface / Background ---- */
  --bg-app:      #f5f7fb;
  --bg-surface:  #ffffff;
  --bg-subtle:   #f8fafc;
  --bg-sunken:   #eef2f7;

  /* ---- Text ---- */
  --text-strong: #0f172a;
  --text-base:   #1e293b;
  --text-muted:  #64748b;
  --text-faint:  #94a3b8;
  --text-invert: #ffffff;

  /* ---- Border ---- */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  /* ---- Typography ---- */
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", "Noto Serif SC", Georgia, "Songti SC", serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */

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

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-normal:1.6;
  --lh-relaxed:1.75;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---- Shadow ---- */
  --sh-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.08);
  --sh-md: 0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --sh-lg: 0 12px 28px rgba(15,23,42,0.10), 0 4px 10px rgba(15,23,42,0.06);
  --sh-xl: 0 24px 48px rgba(15,23,42,0.14);
  --sh-brand: 0 10px 24px rgba(79,70,229,0.28);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 820px;
  --nav-h: 64px;

  /* ---- Motion ---- */
  --t-fast: 140ms ease;
  --t-base: 240ms ease;
  --t-slow: 420ms cubic-bezier(.2,.7,.3,1);
}