/* ============================================================================
   MANARA DESIGN SYSTEM — tokens.css            run_id: MNRDS_20260908 (Phase 1)
   ----------------------------------------------------------------------------
   Visual foundation only. This file defines CSS custom properties and nothing
   else: no selectors that style the live app, no JS, no behaviour.

   NOT loaded by /ess/index.html in Phase 1. It is a standalone foundation for
   the redesign; wiring it into the shell is a later phase with its own
   drift-check, sw.js CACHE bump and rollback.

   Naming: every token is prefixed `--mds-` so it can coexist with the shell's
   existing `--navy --teal --red --ink --muted --line --bg --card …` tokens
   without collision. `legacy-bridge.css` shows how those names would alias to
   these values when the time comes.

   Theme states (the shell already resolves `data-theme` before first paint):
     bare :root                       = light (default)
     prefers-color-scheme: dark       = dark unless data-theme="light"
     :root[data-theme="dark"]         = dark (explicit choice wins)
   Every token is declared in the bare :root block first.
   ========================================================================== */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────
     Primary teal is the existing Manara --teal. Deep teal is the existing
     brand navy #10303A: the PWA theme-color, the Android splash and the
     status bar are painted with it, so it stays as the "deepest" step. */
  --mds-teal:        #0E7C86;   /* Primary Teal — actions, active nav, links */
  --mds-teal-dark:   #0B5F67;   /* Dark Teal — pressed / hover / text on tint */
  --mds-teal-deep:   #10303A;   /* brand navy — header ground, hero text */
  --mds-teal-soft:   #E6F3F4;   /* tint — selected chip, info surfaces */
  --mds-teal-line:   #B9DEE1;   /* tinted border on selected states */
  --mds-on-teal:     #FFFFFF;   /* text on a teal ground (7.1:1 on --mds-teal) */

  /* Entity accent. Kulud employees see red accents today (renderShell sets
     --accent from profile.entity). The rule is preserved: components read
     --mds-accent, which defaults to teal and may be re-pointed at runtime. */
  --mds-accent:      var(--mds-teal);
  --mds-accent-dark: var(--mds-teal-dark);
  --mds-accent-soft: var(--mds-teal-soft);
  --mds-kulud-red:   #8B0E04;   /* the existing Kulud accent, kept for that rule */

  /* ── Neutrals (hue-biased toward teal, never pure grey) ─────────────────── */
  --mds-white:       #FFFFFF;
  --mds-bg:          #F4F6F7;   /* Very Light Grey Background */
  --mds-surface:     #FFFFFF;   /* cards, sheets, header */
  --mds-surface-2:   #EEF2F3;   /* inset panels, inactive chips, table heads */
  --mds-border:      #E3E9EA;   /* Light Border Grey */
  --mds-border-strong:#CBD5D8;  /* input borders, dividers that must be seen */
  --mds-ink:         #0F2830;   /* primary text (15.4:1 on white) */
  --mds-ink-2:       #3D4F55;   /* secondary text (9.2:1) */
  --mds-muted:       #5B6B70;   /* captions, meta (5.9:1) */
  --mds-disabled:    #9AA8AC;   /* disabled text / icons (decorative only) */
  --mds-overlay:     rgba(16, 48, 58, 0.48);

  /* ── Status (visual mapping only; backend status strings are never renamed)
     Each pair passes 4.5:1 for text on its tint. ───────────────────────── */
  --mds-ok:          #136B34;   /* Green  — approved / completed / paid */
  --mds-ok-bg:       #E6F6EC;
  --mds-ok-line:     #B8E4C6;
  --mds-pending:     #7A5200;   /* Amber  — pending / under review */
  --mds-pending-bg:  #FFF4D6;
  --mds-pending-line:#F2D98A;
  --mds-info:        #1F4B9B;   /* Blue   — submitted / in progress */
  --mds-info-bg:     #EAF1FD;
  --mds-info-line:   #BFD3F5;
  --mds-bad:         #A12020;   /* Red    — rejected / cancelled */
  --mds-bad-bg:      #FDECEC;
  --mds-bad-line:    #F3BFBF;
  --mds-neutral:     #4A5A5F;   /* Grey   — closed / inactive */
  --mds-neutral-bg:  #EEF2F3;
  --mds-neutral-line:#D5DDE0;

  /* ── Typography ─────────────────────────────────────────────────────────
     Same family the shell already uses, so Arabic and English share metrics. */
  --mds-font: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", system-ui,
              -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mds-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* role: size / line-height / weight */
  --mds-t-page:      600 22px/28px var(--mds-font);   /* Page Title */
  --mds-t-section:   600 17px/24px var(--mds-font);   /* Section Title */
  --mds-t-card:      600 15px/20px var(--mds-font);   /* Card Title */
  --mds-t-body:      400 15px/22px var(--mds-font);   /* Body Text */
  --mds-t-body-strong: 600 15px/22px var(--mds-font);
  --mds-t-caption:   400 12.5px/18px var(--mds-font); /* Caption */
  --mds-t-status:    600 12px/16px var(--mds-font);   /* Status badge */
  --mds-t-button:    600 15px/20px var(--mds-font);   /* Button Text */
  --mds-t-nav:       500 11px/14px var(--mds-font);   /* bottom-nav label */
  --mds-t-figure:    600 26px/30px var(--mds-font);   /* summary numbers */
  --mds-t-label:     500 11.5px/16px var(--mds-font); /* uppercase eyebrow */
  --mds-ls-label:    0.06em;                          /* letter-spacing for labels (Latin only) */

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --mds-s1: 4px;
  --mds-s2: 8px;
  --mds-s3: 12px;
  --mds-s4: 16px;
  --mds-s6: 24px;
  --mds-s8: 32px;
  --mds-gutter: 16px;          /* page side padding on phones */
  --mds-card-pad: 16px;        /* one padding for every card */
  --mds-touch: 44px;           /* minimum touch target */

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --mds-r-sm: 8px;             /* chips, badges, inputs */
  --mds-r-md: 12px;            /* cards, buttons */
  --mds-r-lg: 18px;            /* bottom sheets (top corners) */
  --mds-r-pill: 999px;

  /* ── Elevation (very light; borders carry most of the separation) ─────── */
  --mds-shadow-1: 0 1px 2px rgba(16, 48, 58, 0.06);
  --mds-shadow-2: 0 4px 12px rgba(16, 48, 58, 0.10);
  --mds-shadow-sheet: 0 -8px 24px rgba(16, 48, 58, 0.18);

  /* ── Layers (mirrors the shell's existing order: sheet 31 > menu > content) */
  --mds-z-nav: 30;
  --mds-z-sheet: 31;
  --mds-z-overlay: 30;
  --mds-z-toast: 40;
  --mds-z-unlock: 80;

  /* ── Safe areas (iPhone notch / home indicator, Android gesture bar) ──── */
  --mds-safe-top:    env(safe-area-inset-top, 0px);
  --mds-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mds-safe-left:   env(safe-area-inset-left, 0px);
  --mds-safe-right:  env(safe-area-inset-right, 0px);
  --mds-nav-h: 60px;                                            /* bottom bar body */
  --mds-nav-clear: calc(var(--mds-nav-h) + var(--mds-safe-bottom) + 28px); /* content clearance incl. the raised + */

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --mds-ease: cubic-bezier(.2,.7,.2,1);
  --mds-dur-fast: 120ms;
  --mds-dur: 200ms;

  color-scheme: light;
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mds-teal:        #3FB0BA;
    --mds-teal-dark:   #7FD3DA;
    --mds-teal-deep:   #0B1519;
    --mds-teal-soft:   #123339;
    --mds-teal-line:   #1F5760;
    --mds-on-teal:     #06262A;
    --mds-kulud-red:   #FF8A80;
    --mds-white:       #FFFFFF;
    --mds-bg:          #0B1519;
    --mds-surface:     #12222A;
    --mds-surface-2:   #182D34;
    --mds-border:      #23373E;
    --mds-border-strong:#33494F;
    --mds-ink:         #E4EEF0;
    --mds-ink-2:       #BFCDD1;
    --mds-muted:       #98ABB1;
    --mds-disabled:    #5E7178;
    --mds-overlay:     rgba(0, 0, 0, 0.6);
    --mds-ok:          #8FE0A8;  --mds-ok-bg:      #123A22; --mds-ok-line:      #1E5A35;
    --mds-pending:     #F3D27A;  --mds-pending-bg: #3A2D0A; --mds-pending-line: #5C4812;
    --mds-info:        #A9C6F5;  --mds-info-bg:    #14294D; --mds-info-line:    #24407A;
    --mds-bad:         #F4A2A2;  --mds-bad-bg:     #45181A; --mds-bad-line:     #6A2528;
    --mds-neutral:     #BFCDD1;  --mds-neutral-bg: #1F3038; --mds-neutral-line: #33494F;
    --mds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --mds-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
    --mds-shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mds-teal:        #3FB0BA;
  --mds-teal-dark:   #7FD3DA;
  --mds-teal-deep:   #0B1519;
  --mds-teal-soft:   #123339;
  --mds-teal-line:   #1F5760;
  --mds-on-teal:     #06262A;
  --mds-kulud-red:   #FF8A80;
  --mds-white:       #FFFFFF;
  --mds-bg:          #0B1519;
  --mds-surface:     #12222A;
  --mds-surface-2:   #182D34;
  --mds-border:      #23373E;
  --mds-border-strong:#33494F;
  --mds-ink:         #E4EEF0;
  --mds-ink-2:       #BFCDD1;
  --mds-muted:       #98ABB1;
  --mds-disabled:    #5E7178;
  --mds-overlay:     rgba(0, 0, 0, 0.6);
  --mds-ok:          #8FE0A8;  --mds-ok-bg:      #123A22; --mds-ok-line:      #1E5A35;
  --mds-pending:     #F3D27A;  --mds-pending-bg: #3A2D0A; --mds-pending-line: #5C4812;
  --mds-info:        #A9C6F5;  --mds-info-bg:    #14294D; --mds-info-line:    #24407A;
  --mds-bad:         #F4A2A2;  --mds-bad-bg:     #45181A; --mds-bad-line:     #6A2528;
  --mds-neutral:     #BFCDD1;  --mds-neutral-bg: #1F3038; --mds-neutral-line: #33494F;
  --mds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mds-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --mds-shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Reduced motion: transitions collapse to instant. */
@media (prefers-reduced-motion: reduce) {
  :root { --mds-dur-fast: 0ms; --mds-dur: 0ms; }
}