/* static/css/design-tokens.css */
:root {
  /* ---- Brand vs action -------------------------------------------------
     KinJo's public identity uses the maroon brand token and the login page.
     The admin does NOT use it for buttons/links on purpose: green is already
     load-bearing here as a STATUS colour ("جاهز" / ready, healthy KPIs), so
     making primary actions green would erase the readiness signal. Green is
     therefore identity (logo, login, marketing chrome) and blue is interaction
     (buttons, links, focus, active tabs) in the data-dense admin.

     These two are the single source of truth. Four different "primary" values
     used to compete (#2563eb here, #1E40AF in admin_design_system.css, #1F5E47
     in kinjo.css, #005ea8 inline on the dashboard); everything below now points
     at --kinjo-action so there is one place to change it. Do not add a fifth. */
  --kinjo-brand: #6D0B00;   /* identity only — logo lockup, login, public chrome */
  --kinjo-action: #1E40AF;  /* interaction — 8.7:1 on white, the most accessible of the four */
  --kinjo-action-hover: #1E3A8A;

  /* Manager-dashboard blue text scale. manager_design.css re-forked
     #2563eb/#1d4ed8/#1e40af as local :root tokens; they are canonicalised
     here so the literals exist exactly once. --kinjo-blue-800 is the action
     colour by another name. */
  --kinjo-blue-600: #2563eb;
  --kinjo-blue-700: #1d4ed8;
  --kinjo-blue-800: var(--kinjo-action);
  --text-kinjo-blue: var(--kinjo-blue-600);

  /* Planning command-center identity: the green the National Planning page
     (and the login chrome) paints as its brand. Lives here so the literal
     exists exactly once; admin_planning.css re-scopes --kinjo-brand to it. */
  --kinjo-brand-green: #1F5E47;
  --kinjo-brand-green-hover: #164634;
  --kinjo-brand-green-subtle: rgba(31, 94, 71, 0.08);

  /* National Planning utility palette (Tailwind v4 default scale, hex).
     The planning markup uses Tailwind-style utility class names; the values
     they resolve to are defined here so the literals exist once. Referenced
     by admin_planning.css only. */
  --planning-slate-50: #f8fafc;
  --planning-slate-100: #f1f5f9;
  --planning-slate-200: #e2e8f0;
  --planning-slate-200-60: #e2e8f099;
  --planning-slate-200-80: #e2e8f0cc;
  --planning-slate-300: #cbd5e1;
  --planning-slate-400: #94a3b8;
  --planning-slate-500: #64748b;
  --planning-slate-600: #475569;
  --planning-slate-700: #334155;
  --planning-slate-800: #1d293d;
  --planning-slate-900: #0f172b;
  --planning-ink: #0f172a;
  --planning-white: #ffffff;
  --planning-muted: #6c757d;
  --planning-yellow-500: #eab308;
  --planning-green-500: #22c55e;
  --planning-emerald-500: #10b981;
  --planning-amber-50: #fffbeb;
  --planning-amber-50-30: #fffbeb4d;
  --planning-amber-100: #fef3c7;
  --planning-amber-200: #fde68a;
  --planning-amber-500: #f59e0b;
  --planning-amber-600: #d97706;
  --planning-amber-700: #b45309;
  --planning-amber-800: #92400e;
  --planning-blue-50: #eff6ff;
  --planning-blue-200: #bfdbfe;
  --planning-blue-700: #1d4ed8;
  --planning-emerald-50: #ecfdf5;
  --planning-emerald-50-30: #ecfdf54d;
  --planning-emerald-100: #d1fae5;
  --planning-emerald-200: #a7f3d0;
  --planning-emerald-600: #059669;
  --planning-emerald-700: #047857;
  --planning-emerald-800: #065f46;
  --planning-indigo-50: #eef2ff;
  --planning-indigo-50-40: #eef2ff66;
  --planning-indigo-100: #e0e7ff;
  --planning-indigo-200: #c7d2fe;
  --planning-indigo-400: #818cf8;
  --planning-indigo-600: #4f46e5;
  --planning-indigo-700: #4338ca;
  --planning-indigo-800: #3730a3;
  --planning-rose-50: #fff1f2;
  --planning-rose-100: #ffe4e6;
  --planning-rose-200: #fecdd3;
  --planning-rose-400: #fb7185;
  --planning-rose-600: #e11d48;
  --planning-rose-700: #be123c;
  --planning-rose-800: #9f1239;
  /* Exact-value tokens resolved from admin_planning.css markup (hx-<value>).
     Named by value on purpose: each is the single source for one literal the
     planning stylesheet used to inline. Merge into semantic names over time. */
  --planning-hx-0284c7: #0284c7;
  --planning-hx-047857: #047857;
  --planning-hx-10b981: #10b981;
  --planning-hx-15803d: #15803d;
  --planning-hx-1e293b: #1e293b;
  --planning-hx-4338ca: #4338ca;
  --planning-hx-4f46e5: #4f46e5;
  --planning-hx-6366f1: #6366f1;
  --planning-hx-818cf8: #818cf8;
  --planning-hx-86efac: #86efac;
  --planning-hx-a5b4fc: #a5b4fc;
  --planning-hx-a7f3d0: #a7f3d0;
  --planning-hx-a855f7: #a855f7;
  --planning-hx-b45309: #b45309;
  --planning-hx-b91c1c: #b91c1c;
  --planning-hx-c2410c: #c2410c;
  --planning-hx-dcfce7: #dcfce7;
  --planning-hx-e0f2fe: #e0f2fe;
  --planning-hx-e11d48: #e11d48;
  --planning-hx-ec4899: #ec4899;
  --planning-hx-ecfdf5: #ecfdf5;
  --planning-hx-eef2ff: #eef2ff;
  --planning-hx-f59e0b: #f59e0b;
  --planning-hx-f5f3ff: #f5f3ff;
  --planning-hx-fca5a5: #fca5a5;
  --planning-hx-fdba74: #fdba74;
  --planning-hx-fde68a: #fde68a;
  --planning-hx-fee2e2: #fee2e2;
  --planning-hx-fef3c7: #fef3c7;
  --planning-hx-ffedd5: #ffedd5;
  --planning-hx-fffbfb: #fffbfb;

  /* Colors */
  --kinjo-color-primary: var(--kinjo-action);
  --kinjo-color-primary-hover: var(--kinjo-action-hover);
  --kinjo-color-secondary: #475569;
  --kinjo-color-success: #c5a059; /* fill/icon accent; use --kinjo-color-success-text for text */
  --kinjo-color-success-text: #8d711b; /* AA-safe on white */
  --kinjo-color-warning: #f59e0b; /* Adjusted for better contrast on light backgrounds */
  --kinjo-color-danger: #ef4444;
  /* --kinjo-color-danger is tuned as a FILL (badges, borders, icon chips). As
     small text on white it measures 3.76:1, under the 4.5 floor, so text that
     must be read -- required-field markers, inline validation -- uses this
     darker sibling at 4.83:1. Same hue, same meaning, legible. */
  --kinjo-color-danger-text: #dc2626;

  /* Muted text on a DARK surface has to go lighter, not darker. The light-ground
     muted tones measure 3.74:1 and 3.2:1 on the analytics panels' dark ground;
     this one measures 8.65:1 there. */
  --kinjo-color-text-muted-on-dark: #a8b6c8;
  /* Its non-muted siblings. The heatmap command-centre is a dark surface,
     so its body text is near-white. These values were previously inline
     literals; naming them as TEXT-on-dark keeps them from being confused
     with the same-valued light-mode background tokens. */
  --kinjo-color-text-on-dark: #f1f5f9;
  --kinjo-color-text-strong-on-dark: #f8fafc;

  /* ---- Journey infographic donut ------------------------------------------
     The four activity buckets ("رعاية / تعليم / نوم / إدارة") of the public
     homepage's daily-activity doughnut. The chart is a canvas, so the
     controller resolves these via getComputedStyle at runtime; the literals
     live here so the colour budget never grows elsewhere. */
  --kinjo-chart-care: #6D0B00;
  --kinjo-chart-learning: #c5a059;
  --kinjo-chart-rest: #94a3b8;
  --kinjo-chart-ops: #0e7490;

  /* ---- Geospatial command centre ----------------------------------------
     The heatmap, its spatial radar and the Leaflet/Chart.js canvases sit on a
     DARK ground, so they cannot reuse the light-mode surface/action tokens --
     several share a value but mean the opposite thing there.

     Values are inlined rather than aliased to --slate-*: a canvas cannot read
     var(), so jordan_cesium_map.js resolves these through _cssToken() at
     runtime, and getPropertyValue on an aliased token is one more substitution
     step to depend on for the map's critical path. Keep the names in sync
     with that helper. */
  --kinjo-geo-surface: #0d1828;
  --kinjo-geo-tooltip-surface: #0f172a;
  --kinjo-geo-accent: #2dd4bf;
  --kinjo-geo-accent-alt: #38bdf8;
  --kinjo-geo-text: #e2e8f0;
  --kinjo-geo-text-dim: #cbd5e1;
  --kinjo-geo-text-muted: #94a3b8;
  --kinjo-geo-outline: #ffffff;
  /* The spatial-distance readouts: nearest / farthest / average, plus the
     child-and-staff demographics figure. Named by role so the four move as a
     set rather than drifting apart. */
  --kinjo-geo-dist-near: #38bdf8;
  --kinjo-geo-dist-far: #fb923c;
  --kinjo-geo-dist-avg: #4ade80;
  --kinjo-geo-demographics: #facc15;

  /* ---- Partner institution cards -----------------------------------------
     The public-homepage "Trusted Institutional Partners" cards: a flat,
     uniform fill and a slightly deeper border for edge definition. */
  --kinjo-partner-card-bg: #38BDF8;
  --kinjo-partner-card-border: #0EA5E9;

  /* ---- Accent gold ------------------------------------------------------
     The gold in the logo lockup, used as a FILL and a BORDER (TOC icons,
     metric-definition rules, section accents). It is not a text colour --
     see --kinjo-color-gold-text-* above for the AA-safe text variants. */
  --kinjo-color-gold-accent: #B49B3B;
  --kinjo-color-gold-text-soft: #8d711b;   /* on the 10% gold tint */

  /* ---- Brand green ------------------------------------------------------
     Identity green, not an action colour (see the brand-vs-action note at the
     top). The pair is the manager dashboard's supervisor-banner gradient. */
  --kinjo-color-brand-green: #1f5e47;
  --kinjo-color-brand-green-light: #2d8a66;

  /* ---- Status pills -----------------------------------------------------
     A filter pill is a background + text + border triplet, and the three have
     to move together or the pill loses contrast. Named as one group so a pill
     anywhere uses a complete set rather than inventing a fourth shade.
     Neutral/info reuse the existing bg-hover, info-tint and action tokens. */
  --kinjo-color-pill-neutral-text: #334155;
  --kinjo-color-pill-neutral-border: #cbd5e1;
  --kinjo-color-pill-warning-surface: #fefce8;
  --kinjo-color-pill-warning-text: #854d0e;
  --kinjo-color-pill-warning-border: #fde68a;
  --kinjo-color-pill-success-surface: #f0fdf4;
  --kinjo-color-pill-success-text: #166534;
  --kinjo-color-pill-success-border: #86efac;
  --kinjo-color-pill-info-border: #93c5fd;
  --kinjo-color-pill-violet-surface: #f5f3ff;
  --kinjo-color-pill-violet-text: #5b21b6;
  --kinjo-color-pill-violet-border: #c4b5fd;

  /* Warm gold-tinted surfaces on the public help page. */
  --kinjo-color-gold-surface-faint: #fffdf5;
  --kinjo-color-gold-surface-soft: #fdf6dc;

  /* Status colours are tuned as fills on light surfaces. As TEXT they need
     separate values, and a dark surface needs different ones again -- a colour
     that passes on white generally fails on near-black and vice versa. Measured
     against the analytics panels' darkest and lightest dark grounds. */
  --kinjo-color-danger-on-dark: #f87171;    /* 6.26:1 min across dark grounds */
  /* --kinjo-color-success-text used to be redeclared here as the literal
     #6D0B00 (maroon) -- a duplicate of the value the "Admin maroon theme"
     block below sets correctly on body.admin-container, but declared at bare
     :root with no scope guard. That is a token leak: this file's own comment
     on body.admin-container says the maroon theme is "Scoped ... so the
     manager, supervisor, parent and public modules keep their existing
     chrome," but the unscoped duplicate here overrode every module's
     "success" surfaces to maroon regardless, including
     static/css/parent-dashboard.css's Help & Support card on the Parent
     Dashboard (visually confirmed live: the card rendered maroon while
     --kinjo-action correctly resolved to the intended blue on that same
     page). The earlier --kinjo-color-success-text above (#8d711b, "AA-safe
     on white") is the pre-existing intentional root default; removing the
     duplicate here lets that value stand again for every module except
     admin, which still gets maroon from the properly scoped block below. */
  --kinjo-color-warning-text: #92620a;      /* 5.28:1 on white; fill amber 2.15:1 */
  --kinjo-color-danger-action: #c81e1e;      /* 5.74:1 with white, for destructive buttons */
  --kinjo-color-danger-text-strong: #b91c1c;/* 6.47:1 on white, for status words */
  /* No prior root default existed for the "-on-tint" variant -- only the
     same leaked #6D0B00. This used to alias to --kinjo-color-success-text
     (#8d711b), which is a regression: that value was only ever validated
     "AA-safe on white" and was never checked against an actual tint surface.
     kinjo.css maps Bootstrap's .text-success-emphasis / .badge.bg-success-
     subtle.text-success to this token, and on Bootstrap's default
     --bs-success-bg-subtle (#d1e7dd) #8d711b measures 3.59:1 -- below the
     4.5:1 floor for the badge text size, confirmed live on the "Open to All"
     badge that repeats across every /services service card. Reusing the
     existing, already-accessible --kinjo-color-pill-success-text (#166534,
     5.49:1 on that same #d1e7dd surface) instead of a new literal fixes it
     everywhere this Bootstrap pairing appears, not just on one page. */
  --kinjo-color-success-text-on-tint: var(--kinjo-color-pill-success-text);
  --kinjo-color-warning-text-on-tint: #7d5408;  /* 5.53:1 on the amber tint */
  /* Brand gold as TEXT. The accent gold #B49B3B is a fill/border value: as text
     on the slate hover tint (#f1f5f9) it measures 2.49:1, well under the 4.5
     floor, which is what the Help Center's TOC hover and active states were
     using. Same hue, darkened until it clears AA. */
  --kinjo-color-gold-text-on-tint: #806E2A;     /* 4.58:1 on #f1f5f9; 5.02:1 on white */
  /* Same gold as text on the WARM gold tint (#fdf6dc) used by the public
     help page's chips, where #8d711b measured 4.30:1 — just under AA. */
  --kinjo-color-gold-text-on-soft-tint: #886D1A; /* 4.56:1 on #fdf6dc; 4.94:1 on white */
  /* The tint/white variants above go the wrong way on a dark ground: the
     dark amber measured 1.55:1 on the supervisor banner's navy. 6.5:1 there. */
  --kinjo-color-warning-on-dark: #fbbf24;
  /* The deep end of the supervisor banner's sweep. Dark enough that both
     white (7.6:1) and the on-dark amber (4.6:1) stay legible over it. */
  --kinjo-color-teal-deep: #164f8a;
  --kinjo-color-neutral-text: #4b5563;      /* 7.56:1 on white */
  /* Status TINTS -- the surfaces the *-text-on-tint foregrounds are measured
     against. These already existed as literals inside .k-badge-* rules; naming
     them means a status chip anywhere can use the same pair instead of
     inventing a new one. */
  --kinjo-color-success-tint: #fff7e6;
  --kinjo-color-danger-tint: #fee2e2;
  /* The auth pages sit on a warm cream ground, where the blue link token
     fights the orange identity. This is the same burnt orange, dark enough to
     read: 5.56:1 on that cream. */
  --kinjo-color-link-warm: #9a4a16;
  --kinjo-color-link-accessible: #0a58ca;   /* 6.12:1 on the warm canvas;
                                               Bootstrap's #0d6efd is 4.27:1 */
  --kinjo-color-info: #3b82f6;
  --kinjo-color-gold-soft: #f1cd82;
  --kinjo-color-indigo: #93c5fd;
  --kinjo-color-public-surface: #f6f8fc;
  --kinjo-color-public-ink: #10213a;
  --kinjo-color-public-border: #cbd8e8;
  --kinjo-color-public-danger-surface: #fff7f7;
  --kinjo-color-public-danger-border: #fecaca;
  --kinjo-color-public-warning-surface: #fffaf0;
  --kinjo-color-neutral-surface: #f8fafc;
  --kinjo-color-info-tint: #eff6ff;
  --kinjo-color-sidebar-accent: #873d32;
  --kinjo-color-sidebar-ink: #3f241f;
  
  /* Page canvas — a warm off-white. The previous #f8fafc was blue-tinted (its blue
     channel sat above its red), which read as cool grey rather than off-white and
     fought the green chrome above it.

     Do not darken this further without darkening --kinjo-color-text-muted with it.
     Muted text measures 4.52:1 here against an AA floor of 4.5; #F8F7F4 drops it to
     4.44 and #F7F6F2 to 4.40, failing on every page at once. This value is the
     warmest off-white the current text scale supports. */
  --kinjo-color-bg-body: #FAF9F6;
  --kinjo-color-bg-surface: #ffffff;
  --kinjo-color-bg-hover: #f1f5f9;
  --kinjo-color-bg-active: #e2e8f0;

  --kinjo-color-text-primary: #0f172a;
  --kinjo-color-text-secondary: #475569;
  --kinjo-color-text-muted: #64748b; /* Better contrast than typical light gray */
  --kinjo-color-text-inverse: #ffffff;

  /* ---- Borders -----------------------------------------------------------
     Component boundaries are the brand green — the same #064E32 the masthead
     wears, so the product reads as one material rather than green chrome bolted
     onto grey components.

     Two weights, and the distinction is load-bearing:

       --kinjo-color-border         the OUTLINE of a component (card, panel,
                                    input, table, dropdown). Dark green.
       --kinjo-color-border-subtle  an internal HAIRLINE (table row separators,
                                    dropdown dividers, list rules). Green-tinted
                                    but light — at full strength every table would
                                    become a heavy grid.

     The outline is also an accessibility gain, not just a restyle: WCAG 1.4.11
     asks 3:1 of a component boundary, and the neutral #e2e8f0 this replaces
     managed 1.23:1 on white. #064E32 measures 9.80:1 on a white card and 9.31:1
     on the page canvas behind it. */
  --kinjo-color-border: #6D0B00;
  --kinjo-color-border-hover: #8A1A10;
  --kinjo-color-border-subtle: #F0DEDB;
  --kinjo-color-ring: rgba(109, 11, 0, 0.3);
  --agency-chart-surface: #ffffff;
  --agency-chart-border: var(--kinjo-color-border);

  /* ---- Jordan Agency Palette -------------------------------------------- */
  --ag-jordan-petra: #c85a32;
  --ag-jordan-olive: #176b4d;
  --ag-jordan-teal: #0f766e;
  --ag-jordan-rose: #be123c;
  --ag-jordan-saffron: #d97706;

  /* ---- Jordan Flag palette (Hashemite Kingdom of Jordan) -----------------
     Sampled straight from the flag: red #CE1126, green #007A3D, black and
     white. The dashboard's activity section ("النشاطات الحديثة") wears this
     palette as its identity: red is the primary accent (section rule, icon
     chips, failed states), green the success colour, black the heading ink,
     white the surface. The deep variants exist because the flag values are
     FILL accents — as small text on their tints they need a darker sibling
     (both deep values measure ≥7:1 on their tint, ≥6:1 on white). The tints
     are static light chips, the same behaviour the status pill tokens above
     already have in dark mode. --kinjo-jordan-ink flips to a light ink in
     dark-mode.css, which owns the dark overrides. */
  --kinjo-jordan-red: #CE1126;         /* 5.63:1 with white */
  --kinjo-jordan-red-deep: #9F0D1D;    /* 7.28:1 on the red tint */
  --kinjo-jordan-red-tint: #FBEEEE;
  --kinjo-jordan-green: #007A3D;       /* 5.45:1 with white */
  --kinjo-jordan-green-deep: #005C2E;  /* 7.30:1 on the green tint */
  --kinjo-jordan-green-tint: #E9F5EE;
  --kinjo-jordan-ink: #000000;         /* headings; dark mode flips it */

  /* ---- Admin shell chrome ----------------------------------------------
     The admin wears a two-tier masthead, and the tiers are deliberately
     different materials rather than two shades of the same one.

     Tier 1 (.admin-header) is the brand band: the deep KinJo green sampled
     from the wordmark itself (#066136, darkened to #064E32 so white sits at
     9.8:1 on it). This is the identity slot the rule above reserves for
     green, and it is what makes the gold-bordered logo read as intentional.

     Tier 2 (.admin-top-nav) stays a light working surface. Its active state
     uses --kinjo-action, NOT green: green is load-bearing as a status colour
     in this admin ("ready", healthy KPI), so a green active tab would compete
     with a meaning that already exists. Identity green above, interaction
     blue below — the two never touch.

     Single source of truth for both tiers. layout.css owns the header's
     structure and top-menu.css the nav's; neither hardcodes a colour, and
     nothing overrides these with !important. */
  --admin-header-bg: #002F6C;
  --admin-header-border: #164f8a;
  --admin-header-ink: #ffffff;          /* 9.80:1 */
  --admin-header-ink-muted: #bfdbfe;    /* readable indigo-muted role line */
  --admin-header-ink-soft: #e0ecff;     /* readable control icons */
  --admin-header-hover: rgba(255, 255, 255, 0.12);
  --admin-header-divider: rgba(255, 255, 255, 0.22);
  --admin-header-avatar-bg: #D4AF37;    /* the logo badge's gold, reused */
  --admin-header-avatar-ink: #002F6C;   /* accessible on the gold */

  --admin-nav-bg: #ffffff;
  --admin-nav-border: var(--kinjo-color-border);
  --admin-nav-ink: #374151;             /* 10.31:1 */
  --admin-nav-ink-strong: #111827;
  --admin-nav-ink-muted: #6B7280;       /* 4.83:1 */
  --admin-nav-hover: #F3F4F6;
  --admin-nav-accent: var(--kinjo-action);
  --admin-nav-accent-soft: #EFF3FD;     /* active dropdown row, 7.85:1 with the accent */

  /* Typography */
  --kinjo-font-family-en: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kinjo-font-family-ar: 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --kinjo-font-size-xs: 0.75rem;
  --kinjo-font-size-sm: 0.875rem;
  --kinjo-font-size-base: 1rem;
  --kinjo-font-size-lg: 1.125rem;
  --kinjo-font-size-xl: 1.25rem;
  --kinjo-font-size-2xl: 1.5rem;
  --kinjo-font-size-3xl: 1.875rem;

  --kinjo-font-weight-light: 300;
  --kinjo-font-weight-normal: 400;
  --kinjo-font-weight-medium: 500;
  --kinjo-font-weight-semibold: 600;
  --kinjo-font-weight-bold: 700;

  /* Spacing */
  --kinjo-spacing-1: 0.25rem;
  --kinjo-spacing-2: 0.5rem;
  --kinjo-spacing-3: 0.75rem;
  --kinjo-spacing-4: 1rem;
  --kinjo-spacing-5: 1.25rem;
  --kinjo-spacing-6: 1.5rem;
  --kinjo-spacing-8: 2rem;
  --kinjo-spacing-10: 2.5rem;
  --kinjo-spacing-12: 3rem;

  /* Shadows */
  --kinjo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --kinjo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --kinjo-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --kinjo-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Radii */
  --kinjo-radius-sm: 0.125rem;
  --kinjo-radius-md: 0.375rem;
  --kinjo-radius-lg: 0.5rem;
  --kinjo-radius-xl: 0.75rem;
  --kinjo-radius-full: 9999px;

  /* Transitions */
  --kinjo-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --kinjo-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Semantic chart palette (chart_utils.js reads these at runtime so the
     canvas colors stay tokenized like every other surface). */
  --kinjo-color-chart-success: #1F5E47;
  --kinjo-color-chart-success-surface: rgba(31, 94, 71, 0.14);
  --kinjo-color-chart-warning: #D97706;
  --kinjo-color-chart-warning-surface: rgba(217, 119, 6, 0.16);
  --kinjo-color-chart-danger: #DC2626;
  --kinjo-color-chart-danger-surface: rgba(185, 28, 28, 0.14);
  --kinjo-color-chart-info: #2563EB;
  --kinjo-color-chart-info-surface: rgba(29, 78, 216, 0.12);
  --kinjo-color-chart-insight: #7C3AED;
  --kinjo-color-chart-insight-surface: rgba(109, 40, 217, 0.12);
  --kinjo-color-chart-neutral: #64748B;
  --kinjo-color-chart-neutral-surface: rgba(71, 85, 105, 0.14);

  /* Home-nursery journey surfaces (banner gradient, hero, application stepper) */
  --kinjo-color-banner-navy: #00224d;
  --kinjo-color-banner-ink: #00132b;
  --kinjo-color-hero-navy: #002f6c;
  --kinjo-color-hero-deep: #001a3d;
  --kinjo-color-hero-gold-ink: #8c6d23;
  --kinjo-color-stepper-track: #e2e8f0;
  --kinjo-color-stepper-muted: #64748b;
  --kinjo-color-stepper-complete: #10b981;
}

[lang="ar"] {
  --kinjo-font-family: var(--kinjo-font-family-ar);
}
[lang="en"] {
  --kinjo-font-family: var(--kinjo-font-family-en);
}
/* The light values for --agency-chart-* are declared once, with the other colour
   tokens at the top of this file. A second :root block restating them verbatim
   used to sit here; only the dark override below is actually needed. */
[data-theme="dark"]:root,
:root[data-theme="dark"]{
  --agency-chart-surface:var(--kinjo-color-bg-surface,#1e293b);
  --agency-chart-border:var(--kinjo-color-border,#3d8a67);
}

/* ---- Analytics surface primitives -------------------------------------
   These were defined only in admin_analytics_v2.css, a page stylesheet that
   /admin/analytics loads and /admin/analytics/charts does not. The Charts
   Explorer's CSS references them 115 times, so on that page every one of
   those declarations was invalid at computed-value time and dropped: the
   whole type scale fell back to the inherited 16px, and
   `outline: 2px solid var(--az-primary)` on :focus-visible resolved to
   `outline: none`, leaving keyboard users with no visible focus at all.

   Verified in the browser before this change: --font-ar, --az-primary*,
   --slate-*, --r-* and --az-danger all resolved to the empty string on
   :root, #chartsExplorerRoot, .ce-hero and .ce-kpi-strip__card. (The page's
   own --ce-* palette is scoped to #chartsExplorerRoot/.ce-hero and resolved
   correctly -- it was never part of this defect.)

   What this does and does not change, stated precisely:

     * No token VALUE is redesigned. Every value below is copied verbatim from
       admin_analytics_v2.css, so this repairs ownership, not design.
     * The analytics overview already resolved these tokens through that page
       stylesheet and should therefore look exactly as it did.
     * The Charts Explorer DOES change, intentionally. 115 references that were
       invalid at computed-value time now resolve, so its previously-authored
       typography, focus ring, radii and neutral surfaces render for the first
       time. That is the point of the fix -- it is a rendering restoration, not
       a no-op.

   KNOWN TENSION, deliberately not resolved here: --az-primary is #2563eb,
   which is one of the four competing "primary" values the note at the top of
   this file says everything should point at --kinjo-action instead. Aliasing
   it would change rendered colour on both analytics pages, which is a design
   decision and not this fix. Left as-is and flagged. */
:root {
  --font-ar: "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  --az-primary: #2563eb;
  --az-primary-hover: #1d4ed8;
  --az-primary-light: #eff6ff;
  --az-primary-mid: #bfdbfe;
  --az-danger: #dc2626;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 9999px;
}

/* ---- Increased contrast ------------------------------------------------
   Windows High Contrast and the iOS/macOS "Increase Contrast" setting both
   surface here. The product previously answered with one rule across 25
   stylesheets, which is to say it did not answer.

   Deliberately narrow: this strengthens boundaries and focus, and does NOT
   repaint surfaces or text. The palette already measures above AA (muted text
   4.52:1, action blue 8.7:1 — see the notes above), so what a
   high-contrast user is missing is not colour but *edges*. Component outlines
   and the focus ring are the two things that thin out first.

   Redefining the tokens means every token-driven component picks this up
   without a per-component rule, which is the same strategy dark-mode.css uses. */

/* ---- Admin maroon theme (body-scoped) ----------------------------------
   The admin's interaction, shell and boundary colours move to the deep
   maroon #6D0B00 (ramp 50-900: #FBF1EF / #EACFC9 / #D69B94 / #B8544A /
   #9A2A1E / #8A1A10 / #6D0B00 / #550900 / #3D0600). Scoped to
   body.admin-container so the manager, supervisor, parent and public
   modules keep their existing chrome. Contrast: the base measures 12.4:1
   on white and the on-dark muted ink ~8.9:1 on the maroon band; both clear
   WCAG AA. Single-value rule respected: aliases point at --kinjo-action,
   never at a fifth literal. */
body.admin-container {
  --kinjo-action: #6D0B00;
  --kinjo-action-hover: #550900;
  --kinjo-brand: var(--kinjo-action);
  --az-primary: var(--kinjo-action);
  --az-primary-hover: var(--kinjo-action-hover);
  --az-primary-light: #FBF1EF;
  --az-primary-mid: #F5E2DF;
  --admin-header-bg: #002F6C;
  --admin-header-border: #164f8a;
  --admin-header-ink-muted: #bfdbfe;
  --admin-header-ink-soft: #e0ecff;
  --admin-header-avatar-ink: #002F6C;
  --admin-nav-accent-soft: var(--az-primary-light);
  --kinjo-color-border: var(--kinjo-action);
  --kinjo-color-border-hover: var(--admin-header-border);
  --kinjo-color-border-subtle: #F0DEDB;
  --kinjo-color-ring: rgba(109, 11, 0, 0.3);
  --kinjo-color-info: #9A2A1E;
  --kinjo-color-info-tint: var(--az-primary-light);
  --kinjo-color-indigo: #D69B94;
  --kinjo-color-pill-info-border: #E3B8B0;
  --kinjo-color-success-text: var(--kinjo-action);
  --kinjo-color-success-text-on-tint: var(--kinjo-action);
}

@media (prefers-contrast: more) {
  body.admin-container {
    --kinjo-color-border: #6D0B00;
    --kinjo-color-border-subtle: #F0DEDB;
  }
}

@media (prefers-contrast: more) {
  :root {
    --kinjo-color-border: #6D0B00;
  --kinjo-color-border-subtle: #F0DEDB;
    --kinjo-color-text-muted: #40505A;
    --kinjo-focus-ring-width: 3px;
  }

  /* A focus ring is the single most important affordance to keep visible. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--kinjo-focus-ring-width, 3px) solid var(--kinjo-action);
    outline-offset: 2px;
  }
}

/* ---- iCloud surface language (manager + supervisor modules) -------------
   The single home for the literal values used by static/css/icloud_theme.css,
   which is bound by the colour-literal budget and must reference tokens.
   Light values on :root, dark values flipped on the theme attribute, exactly
   like every other token pair in this file. */
:root {
  --icloud-bg: #f5f5f7;
  --icloud-surface: #ffffff;
  --icloud-surface-chrome: rgba(255, 255, 255, 0.78);
  --icloud-text: #1d1d1f;
  --icloud-text-secondary: #6e6e73;
}

[data-theme="dark"]:root,
:root[data-theme="dark"] {
  --icloud-bg: #161618;
  --icloud-surface: #1f1f22;
  --icloud-surface-chrome: rgba(24, 24, 27, 0.78);
  --icloud-text: #f5f5f7;
  --icloud-text-secondary: #a1a1a6;
}

/* ---- Public store badges and the WhatsApp support channel ---------------
   The only surfaces on the site that carry a third party's brand colour:
   #25d366 is WhatsApp's own green, and the near-black slab is the Google Play
   / App Store badge convention. Neither can be swapped for a KinJo token
   without misrepresenting whose channel the visitor is about to open. They are
   named here rather than inlined on the public home page so that template
   stays inside its colour-literal budget. */
:root {
  --kinjo-store-badge-surface: #111827;
  --kinjo-store-badge-surface-hover: #1f2937;
  /* The unpublished-listing chip is KinJo's own warm neutral, not a store's. */
  --kinjo-store-badge-pending-surface: #ece6e4;
  --kinjo-store-badge-pending-ink: #574240;
  --kinjo-whatsapp-surface: #25d366;
  --kinjo-whatsapp-surface-hover: #1da851;
  --kinjo-whatsapp-ink: #0b2e13;
}

/* ---- Manager messaging category picker + parent kindergarten cards ------
   Values lifted out of templates/communication/modals/new_message.html and
   templates/parent/wizard/kindergarten_select.html, both bound by the
   colour-literal budget. The values are unchanged: this is a move, not a
   restyle. The picker reads as a blue selection surface on purpose -- it is an
   interaction affordance, the same role --kinjo-action carries elsewhere. */
:root {
  --kinjo-pick-border: #e2e8f0;
  --kinjo-pick-border-hover: #3b82f6;
  --kinjo-pick-surface-hover: #f8faff;
  --kinjo-pick-border-active: #2563eb;
  --kinjo-pick-surface-active: #eff6ff;
  --kinjo-pick-note-surface: #f0f7ff;
  --kinjo-pick-note-border: #cce3ff;
  --kinjo-pill-border: #cbd5e1;
  --kinjo-pill-surface-hover: #f8fafc;
  --kinjo-pill-border-hover: #94a3b8;
}