/* ============================================================
   Maktab Bouholaigah — Design Tokens
   Hasawi palm-tree palette, Arabic-first, Cairo-single-family
   ============================================================
   FB-2026 redesign consolidated to Cairo for both Arabic & Latin
   (Cairo's Latin glyphs handle EN cleanly, and a single-family
   stack eliminates a class of font-loading / x-height drift
   bugs). Mirrors maktab.css :292-294 in the live codebase.

   v2 fix: Cairo is SELF-HOSTED in live `maktab.css:8-31` per
   Phase 2C — DO NOT @import from Google Fonts here. Mockups load
   system Cairo if available; otherwise system-ui falls back via
   --font-ar below. Porting this file to live would otherwise
   regress the self-host work.
*/

:root {
  /* ── Palette: Hasawi ─────────────────────────────── */
  --beige: #F5F0E6;       /* page bg */
  --cream: #FAF8F2;       /* card bg */
  --straw: #D4C5A0;       /* light surface, dividers */
  --sand:  #C2AD7E;       /* borders, gold accents */
  --sand-deep: #8B6914;   /* darker gold */
  --brown: #6B4F36;       /* secondary text, headings */
  --brown-deep: #4A3728;  /* heading + button + active-state foreground */
  --brown-night: #2A2018; /* darkest */

  /* Dark surface for sidebar / inverted chrome. Stays dark in both
     themes — unlike --brown-deep, which flips to a light foreground
     in dark mode so headings stay legible. */
  --surface-inverse: var(--brown-deep);
  --ink: #3D2E22;         /* body text */
  --ink-muted: #6B5A48;   /* secondary text (WCAG AA on beige) */
  --border: #E0D8CA;
  --border-soft: rgba(212,197,160,0.4);

  /* Status — semantic */
  --success: #5E7D5E;        /* palm green */
  --success-bg: #E8EFE6;
  --info: #3D6D8F;           /* sky-link */
  --info-bg: #E2EEF6;
  --warn: #D4A05A;           /* amber/date */
  --warn-bg: #F5E8CC;
  --crit: #C0735E;           /* terracotta */
  --crit-bg: #F4DDD2;
  --overdue: #8B3A25;        /* deep clay-red */
  --overdue-bg: #EFCFC4;

  /* Entity class colors — for the page-head spine + entity row chips.
     Mapped to the semantic status families so dark mode flips work. */
  --entity-charitable:     var(--success);     /* Thilth, beneficiaries */
  --entity-charitable-bg:  var(--success-bg);
  --entity-passthrough:    var(--info);        /* Khums */
  --entity-passthrough-bg: var(--info-bg);
  --entity-personal:       var(--warn);        /* Issam personal, Family Home */
  --entity-personal-bg:    var(--warn-bg);
  --entity-operational:    var(--ink-muted);   /* Maktab Ops, Majlis */
  --entity-operational-bg: var(--straw);

  /* Hasawi basil (الريحان الحساوي) — local sweet-basil grown in Al-Ahsa
     Purple flower spikes, deep green leaves, mauve buds, occasional pink */
  --basil-leaf:      #4A6B3A;
  --basil-leaf-bg:   #E1E9D6;
  --basil-stem:      #7A8B5C;
  --basil-flower:    #6B4576;
  --basil-flower-bg: #E8DCEE;
  --basil-bud:       #B197C2;
  --basil-pink:      #C9719B;
  --basil-pink-bg:   #F2DDE8;

  /* Link — warm brown, NOT blue. Bridged via the live token name
     `--maktab-link` so production CSS that already references
     `var(--maktab-link)` keeps working unchanged. The `--link` alias
     is mockup-side only (live code uses `--maktab-link` directly).
     No underline at rest; affordance on hover/focus only. */
  --maktab-link: var(--brown);
  --link: var(--maktab-link);
  --link-hover-underline: var(--sand);

  /* ── Type ─────────────────────────────────────────── */
  /* Cairo for BOTH Arabic and Latin. Single-family stack.
     `tnum` enabled site-wide on body (see :base) so financial table
     digits align vertically. */
  --font-ar:  'Cairo', system-ui, sans-serif;
  --font-en:  'Cairo', system-ui, sans-serif;
  --font-num: 'Cairo', system-ui, sans-serif;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;

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

  /* ── Radii ────────────────────────────────────────── */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ── Shadows ─────────────────────────────────────── */
  /* Flat-surface design — modal/panel depth via border + scrim.
     --shadow-md / --shadow-lg / --shadow-modal removed (Path C Task G);
     last consumers in components-mockup.css were swapped to border+scrim
     per Phase 2C shadow-removal pattern catalog (A-E).
     --shadow-sm retained as a stable hook for any future subtle elevation. */
  --shadow-sm: 0 1px 2px rgba(74,55,40,0.04);

  /* Overlay shadows — per SHADOW_RULE_REVISION.md.
     Allowed ONLY on overlay/floating elements (modals, panels, dropdowns,
     toasts, popovers). Brown-tinted, soft (40-48px blur), negative spread.
     Forbidden on cards/badges/buttons/tabs in document flow. */
  --shadow-overlay:        0 12px 40px -8px rgba(42, 32, 24, 0.18);
  --shadow-overlay-strong: 0 16px 48px -12px rgba(42, 32, 24, 0.22);

  /* ── Motion ──────────────────────────────────────── */
  --ease: cubic-bezier(.32,.72,.4,1);
  --dur-fast: .12s;
  --dur-base: .18s;
  --dur-slow: .28s;
}

/* ── Dark mode (palm garden at dusk) ──────────────────── */
[data-theme="dark"] {
  --beige: #1A1510;
  --cream: #24201A;
  --straw: #3D3428;
  --sand:  #5A4F3C;
  --brown: #C2AD7E;
  /* --brown-deep flips to a WARM CREAM in dark so it keeps reading
     as a foreground accent (headings, active tab underline, primary
     button bg, active pill bg). The dark sidebar surface lives on
     --surface-inverse below — they were conflated before, which made
     every heading on dark mode collapse into the page. */
  --brown-deep: #E8DCBA;
  --surface-inverse: #1F1A14;
  --ink: #E8E0D4;
  --ink-muted: #A89A82;
  --border: #3D3428;
  --border-soft: rgba(194,173,126,0.18);

  --success-bg: #1F2A1F;
  --info-bg: #1A2A38;
  --warn-bg: #2E2418;
  --crit-bg: #2E1F18;
  --overdue-bg: #2E1A14;

  /* Basil dark variants — values aligned with the LIVE maktab.css
     [data-theme="dark"] block. Without these the basil callout
     (manager-note thread item) goes light-on-light in dark mode. */
  --basil-leaf:      #A8C896;
  --basil-leaf-bg:   rgba(168,200,150,.16);
  --basil-stem:      #9CAA82;
  --basil-flower:    #C9A4D4;
  --basil-flower-bg: rgba(169,133,182,.18);
  --basil-bud:       #C5ADD3;
  --basil-pink:      #E59ABA;
  --basil-pink-bg:   rgba(229,154,186,.16);

  /* Link inherits --brown which flipped to sand above; no override needed. */
  --link-hover-underline: var(--sand);
}

/* ── Base ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { font-size: 14px; }
body {
  margin: 0;
  font-family: var(--font-ar);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--beige);
  /* `direction` removed here — was unconditionally `rtl` (legacy AR-first
     default) which forced every logical property (margin-inline-start,
     padding-inline-start, etc.) to resolve to RTL physical sides EVEN
     when the user's language was English and html dir="ltr". Result:
     in EN, .main-section's `margin-inline-start: 200px` ended up as
     margin-right, leaving the sidebar (positioned at left:0) overlapping
     the content while a 200px empty strip sat on the right. Now body
     inherits direction from html — Frappe sets html dir based on
     user.language, so direction propagates correctly in both languages. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* tnum + lnum globally — Cairo supports both; ensures financial column alignment. */
  font-feature-settings: "tnum" 1, "lnum" 1;
}

h1,h2,h3,h4 { margin: 0; color: var(--brown-deep); font-weight: 600; }
h1 { font-size: var(--text-3xl); line-height: 1.2; }
h2 { font-size: var(--text-2xl); line-height: 1.25; }
h3 { font-size: var(--text-lg); line-height: 1.3; }
h4 { font-size: var(--text-base); }
p  { margin: 0; }

/* Link rule — warm brown body, hover-only underline.
   `text-underline-offset: 3px` so the underline doesn't crash into
   Arabic descenders / Latin ascenders. RTL/LTR safe. */
a {
  color: var(--link);
  text-decoration: none;
}
a:hover, a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--link-hover-underline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Numeral utilities.
   .num     — tabular figures (financial columns; KPI values)
   .num-prop — proportional figures (running prose: "12 properties")
   .ltr-code — record IDs (MTX-26-00042) in Arabic prose
*/
.num { font-family: var(--font-num); font-feature-settings: "tnum" 1, "lnum" 1; }
.num-prop { font-family: var(--font-num); font-feature-settings: "pnum" 1, "lnum" 1; }
.ltr-code { direction: ltr; unicode-bidi: isolate; font-family: var(--font-num); font-feature-settings: "tnum" 1, "lnum" 1; }