/* ==========================================================================
   MUNEEB design tokens — Official Brand Identity (Colors, IBM Plex Sans Arabic & Brand Marks)
   ========================================================================== */
:root {
  /* Official Brand Palette (from Brand Guideline 2026) */
  --olive: #50512B;
  --olive-dark: #262713;
  --olive-deep: #1E2010;
  --honey: #CE893A;
  --honey-light: #E8A85A;
  --ivory: #FFF6E9;
  --ivory-light: #FCF9F2;
  --white: #FFFFFF;
  --ink: #1A1A1A;

  /* Official Brand Typography — IBM Plex Sans Arabic (with Tajawal fallback) */
  --font-ui: "IBM Plex Sans Arabic", "Tajawal", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-display: "IBM Plex Sans Arabic", "Tajawal", "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* Semantic tokens */
  --bg: var(--white);
  --bg-alt: var(--ivory-light);
  --surface: var(--white);
  --surface-2: var(--ivory-light);
  --text: var(--ink);
  --text-soft: #5c5b4d;
  --muted: #8a8775;
  --line: rgba(80, 81, 43, .14);
  --line-strong: rgba(80, 81, 43, .32);
  --accent: var(--olive);
  --accent-ink: var(--white);
  --gold: var(--honey);
  --card-bg: var(--white);
  --card-text: var(--ink);
  --header-bg: rgba(255, 255, 255, .92);
  --frame-color: var(--olive);

  /* Official Brand Pattern & Bee Mark */
  --brand-pattern: url("/static/brand/pattern.svg");
  --brand-pattern-size: 64px 64px;
  --brand-mark: url("/static/brand/mark.svg");
  --ph-bg: var(--ivory-light);

  /* Shape & motion */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(30, 32, 16, .06);
  --shadow-md: 0 10px 30px -12px rgba(30, 32, 16, .18);
  --shadow-lg: 0 30px 60px -25px rgba(30, 32, 16, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 9vw, 112px);
}