/* =============================================================================
   ICS Digital Platform — Design Tokens (tokens.css)
   PALETTE PROVENANCE (v1.2): every brand hue is sampled from the Society's own
   emblem — the olive wreath (#13371D), the Dome of the Rock's gold (#C38C4B),
   its tilework navy (#2D4470), and the ribbon olive (#8E9E3B). Ramps are
   hue-matched extensions of those samples, never invented approximations.

   Single source of truth. Every mockup, template, and component derives from
   these custom properties; ad-hoc values are prohibited in code review.
   Framework-agnostic: works identically under PHP views, Vue, React, etc.
   The same values are published as tokens.json for build tooling and Flutter.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------- COLOR
     Brand: deep green (Islamic charitable identity, trust/growth) with a warm
     sand-gold accent (Jerusalem stone). All pairings meet WCAG 2.1 AA at the
     usage documented beside each token. */
  --ics-color-primary:        #215A31;  /* emblem wreath-green, mid ramp; on white 8.2:1 */
  --ics-color-primary-dark:   #17451F;  /* hover/active; on white 11.0:1 */
  --ics-color-primary-deep:   #13371D;  /* EXACT emblem olive-wreath green; on white 13.2:1 */
  --ics-color-primary-soft:   #E6EFE7;  /* tinted surfaces, selected states */
  --ics-color-secondary:      #C38C4B;  /* EXACT emblem dome gold; 2.9:1 — decorative/large only */
  --ics-color-secondary-dark: #8A5E23;  /* small-text-safe gold; on white 5.7:1 */
  --ics-color-secondary-soft: #F6EDDF;  /* v1.1: gold-tinted badges/surfaces */
  --ics-color-stone:          #F2EFE7;  /* Beit Sahour limestone — alternating sections */

  --ics-color-olive:          #8E9E3B;  /* EXACT emblem ribbon olive; decorative/large only */
  --ics-color-olive-dark:     #5E6B22;  /* small-text-safe olive; on white 5.8:1 */

  /* v1.1: categorical chart palette (dashboards, reports) */
  --ics-chart-1: #215A31; --ics-chart-2: #C38C4B;
  --ics-chart-3: #2D4470; --ics-chart-4: #8E9E3B; --ics-chart-5: #C9B77E;
  --ics-color-success:        #1B7F4B;
  --ics-color-warning:        #9A6300;  /* on white 4.5:1 */
  --ics-color-danger:         #B3261E;
  --ics-color-info:           #2D4470;  /* EXACT emblem tile navy; on white 9.7:1 */

  --ics-color-background:     #F7F8F5;  /* app/page background */
  --ics-color-surface:        #FFFFFF;  /* cards, panels, tables */
  --ics-color-surface-sunken: #F0F2EE;  /* wells, table stripes */
  --ics-color-border:         #D7DCD4;
  --ics-color-border-strong:  #B0B8AC;

  --ics-color-text:           #1F2933;  /* on surface 14.7:1 */
  --ics-color-text-muted:     #52606D;  /* on surface 7.0:1 */
  --ics-color-text-inverse:   #FFFFFF;
  --ics-color-link:           #17451F;
  --ics-color-focus-ring:     #2D4470;  /* always visible, never removed */

  /* Overlay & states */
  --ics-color-overlay:        rgba(28, 38, 30, 0.55);
  --ics-color-disabled-bg:    #E4E7E6;
  --ics-color-disabled-text:  #8B959E;

  /* ------------------------------------------------------------ TYPOGRAPHY
     RTL-first: Cairo is the primary Arabic web face for body, headings and display.
     It is loaded by the HTML layouts from Google Fonts with system fallbacks.
     Print/receipts keep Amiri because the PDF renderer embeds it locally. */
  --ics-font-family-ar:       "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --ics-font-family-en:       "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
  --ics-font-family-heading:  "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --ics-font-family-mono:     "JetBrains Mono", Consolas, monospace; /* refs, amounts */
  --ics-font-family-display:  "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --ics-font-family-print-ar: "Amiri", serif;

  --ics-font-size-xs:   0.75rem;   /* 12px — badges, table meta */
  --ics-font-size-sm:   0.875rem;  /* 14px — secondary text, dense admin tables */
  --ics-font-size-md:   1rem;      /* 16px — body default (never smaller for body) */
  --ics-font-size-lg:   1.125rem;  /* 18px — lead paragraphs */
  --ics-font-size-xl:   1.375rem;  /* 22px — card titles, h4 */
  --ics-font-size-2xl:  1.75rem;   /* 28px — section headings, h3/h2 */
  --ics-font-size-3xl:  2.25rem;   /* 36px — page titles, h1 */
  --ics-heading-xl:     2.75rem;   /* 44px — hero display */

  --ics-font-weight-regular: 400;
  --ics-font-weight-medium:  500;
  --ics-font-weight-bold:    700;

  --ics-line-height-tight:  1.25;   /* headings (Arabic needs ≥1.2) */
  --ics-line-height-normal: 1.6;    /* Arabic body: taller than Latin norm */
  --ics-line-height-loose:  1.8;    /* long-form reading */

  /* --------------------------------------------------------------- SPACING
     4px base scale. Use logical properties (margin-inline-start, padding-inline)
     exclusively, so RTL/LTR need no overrides. */
  --ics-space-1:  0.25rem;   /*  4px */
  --ics-space-2:  0.5rem;    /*  8px */
  --ics-space-3:  0.75rem;   /* 12px */
  --ics-space-4:  1rem;      /* 16px */
  --ics-space-5:  1.5rem;    /* 24px */
  --ics-space-6:  2rem;      /* 32px */
  --ics-space-7:  2.5rem;    /* 40px */
  --ics-space-8:  3rem;      /* 48px */
  --ics-space-9:  4rem;      /* 64px */
  --ics-space-10: 6rem;      /* 96px */

  /* ---------------------------------------------------------------- RADIUS */
  --ics-radius-sm:   0.25rem;  /* inputs, badges */
  --ics-radius-md:   0.5rem;   /* buttons, cards */
  --ics-radius-lg:   1rem;     /* modals, feature cards */
  --ics-radius-pill: 999px;    /* pills, progress bars */

  /* --------------------------------------------------------------- SHADOWS */
  --ics-shadow-sm: 0 1px 2px rgba(28, 38, 30, 0.08);
  --ics-shadow-md: 0 4px 12px rgba(28, 38, 30, 0.12);
  --ics-shadow-lg: 0 12px 32px rgba(28, 38, 30, 0.18);
  --ics-shadow-hover: 0 14px 30px -8px rgba(33, 90, 49, 0.28); /* v1.1: card/button lift */
  --ics-shadow-focus: 0 0 0 3px rgba(45, 68, 112, 0.35); /* pairs with focus ring */

  /* ---------------------------------------------------------------- MOTION
     Respect prefers-reduced-motion (see below). Nothing decorative >300ms. */
  --ics-duration-fast:   120ms;  /* hovers, toggles */
  --ics-duration-normal: 200ms;  /* dropdowns, tabs */
  --ics-duration-slow:   320ms;  /* modals, drawers, page transitions */
  /* A slight overshoot: drawers should feel physical, not mechanical. */
  --ics-easing-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ics-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --ics-easing-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ics-easing-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* --------------------------------------------------------------- Z-INDEX */
  --ics-z-dropdown: 1000;
  --ics-z-sticky:   1020;
  --ics-z-overlay:  1040;
  --ics-z-modal:    1050;
  --ics-z-toast:    1080;

  /* ------------------------------------------------------------ COMPONENT
     Derived component tokens: components consume THESE, so a rebrand touches
     only this file. */
  --ics-btn-height:        2.75rem;  /* 44px — WCAG touch target */
  --ics-input-height:      2.75rem;
  --ics-control-radius:    var(--ics-radius-md);
  --ics-card-padding:      var(--ics-space-5);
  --ics-table-row-height:  3rem;
  --ics-sidebar-width:     16.5rem;
  --ics-topbar-height:     4rem;
  --ics-content-max-width: 75rem;    /* 1200px */
}

/* Breakpoints (CSS custom properties cannot drive @media; these are the
   canonical values, mirrored in tokens.json — mobile-first, min-width):
     sm 576px · md 768px · lg 992px · xl 1200px                              */

/* Direction-aware base: RTL is the DEFAULT document direction. */
html { direction: rtl; }
html[lang="ar"] body { font-family: var(--ics-font-family-ar); }
html[lang="en"]      { direction: ltr; }
html[lang="en"] body { font-family: var(--ics-font-family-en); }

/* Accessibility contracts encoded as tokens-adjacent rules */
:focus-visible {
  outline: 2px solid var(--ics-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ics-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ics-duration-fast: 0ms;
    --ics-duration-normal: 0ms;
    --ics-duration-slow: 0ms;
  }
  * { animation: none !important; transition: none !important; }
}
:root {
  --ics-announcement-info-bg: #eef6ff;
  --ics-announcement-info-text: #163a5f;
  --ics-announcement-high-bg: #fff5df;
  --ics-announcement-high-text: #6b4300;
  --ics-announcement-critical-bg: #fff0f0;
  --ics-announcement-critical-text: #7d1515;
  --ics-announcement-low-bg: #f5f7f8;
  --ics-announcement-low-text: #334155;
}