/* =========================================================================
   MCI Design System — Design Tokens
   =========================================================================
   Single source of truth for colour, type, space, radius, elevation, motion.

   Brand evolution: anchored on the MCI logo (--mci-blue #0b63b6,
   --mci-green #8cc63f) and deepened into a calm, premium navy system with a
   restrained medical-green accent. The legacy cyan/gradient palette in
   frontend/assest/css/style.css is deliberately NOT carried over.

   Everything is namespaced `--mci-*` and `.mci-*` so this layer can coexist
   with Bootstrap 5 (public site) and AdminLTE 2 (portals) during progressive
   adoption. Nothing here overrides a third-party selector.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     COLOUR — Navy / primary
     Brand anchor #0b63b6 sits at 600. Darker steps carry the "premium,
     established" weight; lighter steps are for surfaces, never for text.
     --------------------------------------------------------------------- */
  --mci-navy-50:  #f2f7fd;
  --mci-navy-100: #e3eefa;
  --mci-navy-200: #c2ddf3;
  --mci-navy-300: #8bbde8;
  --mci-navy-400: #4a99d8;
  --mci-navy-500: #1a7ac9;
  --mci-navy-600: #0b63b6; /* brand anchor — from mci-brand.css */
  --mci-navy-700: #0f4372;
  --mci-navy-800: #0d3355;
  --mci-navy-900: #0a2540;
  --mci-navy-950: #071a2f;

  /* ---------------------------------------------------------------------
     COLOUR — Medical green accent
     The logo green (#8cc63f) is bright and lime-leaning. Desaturated here
     into a calmer clinical green. Used sparingly: success, verified marks,
     progress complete. Never as a large field.
     --------------------------------------------------------------------- */
  --mci-green-50:  #f3f8ec;
  --mci-green-100: #e4f0d4;
  --mci-green-200: #cbe2ad;
  --mci-green-300: #aacf7c;
  --mci-green-400: #8cc63f; /* logo green — small highlights only */
  --mci-green-500: #74a83c;
  /* green-600 carries white text/icons on the completed journey marker, so it
     is pinned at 4.75:1 against white (WCAG AA). Do not lighten it. */
  --mci-green-600: #527f28;
  --mci-green-700: #497126;
  --mci-green-800: #3a5a20;

  /* ---------------------------------------------------------------------
     COLOUR — Neutrals
     Very slightly cool-warm balanced so large white areas read calm, not
     clinical-cold. Text colours are contrast-checked against --mci-surface.
     --------------------------------------------------------------------- */
  --mci-neutral-0:   #ffffff;
  --mci-neutral-25:  #fcfdfe;
  --mci-neutral-50:  #f7f9fb;
  --mci-neutral-100: #eef2f6;
  --mci-neutral-200: #dfe6ed;
  --mci-neutral-300: #c6d1dc;
  --mci-neutral-400: #94a3b3;
  --mci-neutral-500: #667888;
  --mci-neutral-600: #4a5c6b;
  --mci-neutral-700: #35454f;
  --mci-neutral-800: #223039;
  --mci-neutral-900: #131c23;

  /* ---------------------------------------------------------------------
     COLOUR — Semantic
     Muted on purpose. A worried patient should not be met with alarm-red or
     signal-amber. These are informative, not urgent.
     --------------------------------------------------------------------- */
  --mci-success:        #2f7d5d;
  --mci-success-surface:#eef7f2;
  --mci-success-border: #bfe0d0;

  --mci-warning:        #9a6410;
  --mci-warning-surface:#fdf5e8;
  --mci-warning-border: #f0dcb4;

  --mci-danger:         #a8352c;
  --mci-danger-surface: #fbf0ef;
  --mci-danger-border:  #eec8c4;

  --mci-info:           var(--mci-navy-700);
  --mci-info-surface:   var(--mci-navy-50);
  --mci-info-border:    var(--mci-navy-200);

  /* ---------------------------------------------------------------------
     COLOUR — Semantic roles (use these in components, not raw ramps)
     --------------------------------------------------------------------- */
  --mci-surface:          var(--mci-neutral-0);
  --mci-surface-sunken:   var(--mci-neutral-50);
  --mci-surface-raised:   var(--mci-neutral-0);
  --mci-surface-inverse:  var(--mci-navy-950);
  --mci-surface-accent:   var(--mci-navy-50);

  --mci-text:             var(--mci-neutral-900); /* 15.8:1 on white */
  --mci-text-secondary:   var(--mci-neutral-600); /*  7.4:1 on white */
  --mci-text-muted:       var(--mci-neutral-500); /*  5.1:1 on white */
  --mci-text-inverse:     var(--mci-neutral-0);
  --mci-text-brand:       var(--mci-navy-700);    /*  7.9:1 on white */
  --mci-text-on-brand:    var(--mci-neutral-0);

  --mci-border:           var(--mci-neutral-200);
  --mci-border-strong:    var(--mci-neutral-300);
  --mci-border-subtle:    var(--mci-neutral-100);

  --mci-focus-ring:       var(--mci-navy-500);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     Latin: Inter — neutral, highly legible, wide weight range.
     Arabic: IBM Plex Sans Arabic — a true Arabic design, not a Latin face
     with bolted-on glyphs. Loaded per-locale so we never ship both.
     --------------------------------------------------------------------- */
  --mci-font-latin:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mci-font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --mci-font-sans:   var(--mci-font-latin);
  --mci-font-mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale. clamp() keeps mobile comfortable and desktop composed
     without a cascade of breakpoints. Ratio ~1.2 mobile, ~1.25 desktop. */
  --mci-text-xs:      0.75rem;   /* 12px — captions, never body */
  --mci-text-sm:      0.875rem;  /* 14px */
  --mci-text-base:    1rem;      /* 16px — minimum body size */
  --mci-text-md:      1.0625rem; /* 17px — long-form body */
  --mci-text-lg:      clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --mci-text-xl:      clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --mci-text-2xl:     clamp(1.5rem, 1.2vw + 1.2rem, 1.875rem);
  --mci-text-3xl:     clamp(1.75rem, 2vw + 1.25rem, 2.375rem);
  --mci-text-4xl:     clamp(2rem, 3vw + 1.35rem, 3rem);
  --mci-text-display: clamp(2.25rem, 4.2vw + 1.4rem, 3.75rem);

  --mci-weight-regular:  400;
  --mci-weight-medium:   500;
  --mci-weight-semibold: 600;
  --mci-weight-bold:     700;

  --mci-leading-tight:   1.15;
  --mci-leading-snug:    1.3;
  --mci-leading-normal:  1.5;
  --mci-leading-relaxed: 1.7;  /* body copy — reduces reading effort */

  --mci-tracking-tight:  -0.02em;
  --mci-tracking-snug:   -0.011em;
  --mci-tracking-normal: 0;
  --mci-tracking-wide:   0.04em;
  --mci-tracking-caps:   0.08em;

  /* Comfortable measure. Long medical explanations must not run edge to edge. */
  --mci-measure:       68ch;
  --mci-measure-tight: 52ch;

  /* ---------------------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------------------- */
  --mci-space-0:  0;
  --mci-space-1:  0.25rem;  /*  4 */
  --mci-space-2:  0.5rem;   /*  8 */
  --mci-space-3:  0.75rem;  /* 12 */
  --mci-space-4:  1rem;     /* 16 */
  --mci-space-5:  1.25rem;  /* 20 */
  --mci-space-6:  1.5rem;   /* 24 */
  --mci-space-8:  2rem;     /* 32 */
  --mci-space-10: 2.5rem;   /* 40 */
  --mci-space-12: 3rem;     /* 48 */
  --mci-space-16: 4rem;     /* 64 */
  --mci-space-20: 5rem;     /* 80 */
  --mci-space-24: 6rem;     /* 96 */
  --mci-space-32: 8rem;     /* 128 */

  /* Vertical rhythm between page sections — generous, calm. */
  --mci-section-y: clamp(3.5rem, 7vw, 7rem);

  /* ---------------------------------------------------------------------
     RADIUS — restrained. The brief rules out childish 24px cards.
     --------------------------------------------------------------------- */
  --mci-radius-xs:   4px;
  --mci-radius-sm:   6px;
  --mci-radius-md:   8px;
  --mci-radius-lg:   12px;
  --mci-radius-xl:   16px;
  --mci-radius-pill: 999px;

  /* ---------------------------------------------------------------------
     ELEVATION — soft and low. Depth comes from fine borders first,
     shadow second. Tinted with navy so shadows never look grey-dirty.
     --------------------------------------------------------------------- */
  --mci-shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.05);
  --mci-shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.06), 0 1px 2px rgba(10, 37, 64, 0.04);
  --mci-shadow-md: 0 4px 12px rgba(10, 37, 64, 0.07), 0 2px 4px rgba(10, 37, 64, 0.04);
  --mci-shadow-lg: 0 12px 28px rgba(10, 37, 64, 0.09), 0 4px 10px rgba(10, 37, 64, 0.04);
  --mci-shadow-xl: 0 24px 48px rgba(10, 37, 64, 0.12), 0 8px 16px rgba(10, 37, 64, 0.05);

  /* ---------------------------------------------------------------------
     MOTION — communicates state change, never decorates.
     --------------------------------------------------------------------- */
  --mci-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --mci-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --mci-duration-instant: 80ms;
  --mci-duration-fast:    150ms;
  --mci-duration-normal:  240ms;
  --mci-duration-slow:    400ms;
  --mci-transition: var(--mci-duration-fast) var(--mci-ease-out);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --mci-container:       1200px;
  --mci-container-narrow: 780px;
  --mci-container-wide:  1440px;
  --mci-gutter:          clamp(1rem, 4vw, 2.5rem);

  /* Minimum comfortable touch target (WCAG 2.5.5 / AAA target size). */
  --mci-tap-target: 44px;

  /* ---------------------------------------------------------------------
     Z-INDEX — named, so nothing enters a z-index arms race.
     --------------------------------------------------------------------- */
  --mci-z-base:     0;
  --mci-z-raised:   10;
  --mci-z-sticky:   100;
  --mci-z-header:   200;
  --mci-z-dropdown: 300;
  --mci-z-overlay:  400;
  --mci-z-modal:    500;
  --mci-z-toast:    600;
}

/* =========================================================================
   LOCALE — Arabic
   Applied via [dir="rtl"] / [lang="ar"], both already emitted by
   frontend/layouts/app.blade.php. Arabic needs slightly more line-height and
   no negative tracking: tight tracking damages Arabic letter joining.
   ========================================================================= */
[dir="rtl"],
[lang="ar"] {
  --mci-font-sans: var(--mci-font-arabic);
  --mci-tracking-tight: 0;
  --mci-tracking-snug: 0;
  --mci-leading-tight: 1.35;
  --mci-leading-snug: 1.5;
  --mci-leading-normal: 1.7;
  --mci-leading-relaxed: 1.9;
  --mci-measure: 62ch;
}

/* =========================================================================
   REDUCED MOTION
   Honour the OS setting globally. Animation in this system is always
   supplementary — nothing here conveys meaning through motion alone.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mci-duration-instant: 0ms;
    --mci-duration-fast:    0ms;
    --mci-duration-normal:  0ms;
    --mci-duration-slow:    0ms;
  }
}

/* =========================================================================
   FORCED COLORS (Windows High Contrast)
   Keep borders visible when the system replaces our palette.
   ========================================================================= */
@media (forced-colors: active) {
  :root {
    --mci-border: CanvasText;
    --mci-border-strong: CanvasText;
  }
}