/**
 * MilitarySci — Design System Tokens v5.0 "Dark Galaxy Intelligence"
 * ---------------------------------------------------------------
 * Canonical prefix: --ms-*
 * Legacy aliases (--msi-*) are kept at the bottom as a compat shim for
 * legacy sheets; NEW code must consume --ms-* only.
 *
 * Layers:
 *   1. Palette (dark base + light theme)
 *   2. Surfaces & elevation
 *   3. Typography (Arabic-first: IBM Plex Sans Arabic / IBM Plex Mono)
 *   4. Spacing / radius / borders / density
 *   5. Motion
 *   6. Atmosphere (restrained radar/scan/precision vocabulary)
 *   7. Tier system (standard → premium → vip → sponsor → strategic)
 *   8. Layout metrics & z-scale
 */

:root {
	/* ============================================================
	   1. PALETTE — Dark Galaxy Intelligence (never pure black)
	   ============================================================ */

	/* Deep space neutrals */
	--ms-color-bg:            #0E0F12;   /* base environment */
	--ms-color-bg-deep:       #0A0B0E;   /* sunken / void */
	--ms-color-bg-secondary:  #121318;   /* page bands */
	--ms-color-surface:       #15171C;   /* cards, panels */
	--ms-color-surface-raised:#1A1D24;   /* elevated cards, dropdowns */
	--ms-color-surface-hi:    #20242E;   /* hover surface */
	--ms-color-overlay:       rgba(10, 11, 14, .82);   /* modal/veil */
	--ms-color-glass:         color-mix(in srgb, #15171C 78%, transparent);

	/* Text */
	--ms-color-text:          #E9EBF1;
	--ms-color-text-secondary:#A9AFBC;
	--ms-color-text-tertiary: #717788;
	--ms-color-text-quaternary:#4C5261;
	--ms-color-text-inverse:  #14161B;
	--ms-color-text-on-accent:#160B04;

	/* Signal — primary accent */
	--ms-color-accent:        #FF6A2B;
	--ms-color-accent-hover:  #FF8550;
	--ms-color-accent-press:  #E8561C;
	--ms-color-accent-soft:   rgba(255, 106, 43, .13);
	--ms-color-accent-softer: rgba(255, 106, 43, .07);
	--ms-color-accent-line:   rgba(255, 106, 43, .38);

	/* Data spectrum (intelligence categories) */
	--ms-color-cobalt:        #5C91C9;
	--ms-color-cobalt-soft:   rgba(92, 145, 201, .14);
	--ms-color-teal:          #47B5AA;
	--ms-color-teal-soft:     rgba(71, 181, 170, .13);
	--ms-color-violet:        #9184E0;
	--ms-color-violet-soft:   rgba(145, 132, 224, .14);
	--ms-color-amber:         #F0A82E;
	--ms-color-amber-soft:    rgba(240, 168, 46, .13);
	--ms-color-crimson:       #E04545;
	--ms-color-crimson-soft:  rgba(224, 69, 69, .14);
	--ms-color-green:         #57B87B;
	--ms-color-green-soft:    rgba(87, 184, 123, .13);
	--ms-color-orange-soft:   rgba(255, 106, 43, .13);

	/* Status */
	--ms-color-success:       var(--ms-color-green);
	--ms-color-success-soft:  var(--ms-color-green-soft);
	--ms-color-warning:       var(--ms-color-amber);
	--ms-color-warning-soft:  var(--ms-color-amber-soft);
	--ms-color-danger:        var(--ms-color-crimson);
	--ms-color-danger-soft:   var(--ms-color-crimson-soft);
	--ms-color-info:          var(--ms-color-cobalt);
	--ms-color-info-soft:     var(--ms-color-cobalt-soft);

	/* Borders & hairlines */
	--ms-color-border:        rgba(176, 182, 199, .13);
	--ms-color-border-strong: rgba(176, 182, 199, .26);
	--ms-color-border-accent: var(--ms-color-accent-line);
	--ms-color-hairline:      rgba(176, 182, 199, .08);

	/* Neutral stops for charts / steps */
	--ms-color-neutral-1:     #1B1E25;
	--ms-color-neutral-2:     #2A2E39;
	--ms-color-neutral-3:     #4C5261;

	/* ============================================================
	   2. ELEVATION
	   ============================================================ */
	--ms-shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 1px rgba(0, 0, 0, .20);
	--ms-shadow-2: 0 6px 18px -6px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .30);
	--ms-shadow-3: 0 18px 50px -12px rgba(0, 0, 0, .55), 0 6px 16px -8px rgba(0, 0, 0, .38);
	--ms-shadow-accent: 0 0 0 1px var(--ms-color-accent-line), 0 8px 28px -10px rgba(255, 106, 43, .30);
	--ms-shadow-inset: inset 0 1px 0 rgba(233, 235, 241, .045);

	/* ============================================================
	   3. TYPOGRAPHY — Arabic native, mono for data
	   ============================================================ */
	--ms-font-ui:        "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
	--ms-font-display:   "Changa", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--ms-font-body:      var(--ms-font-ui);
	--ms-font-mono:      "IBM Plex Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

	--ms-ar-scale: 1.06;   /* optical compensation for Arabic glyph density */

	/* Fluid type scale */
	--ms-fs-hero:   clamp(2.1rem, 1.35rem + 3.2vw, 4.2rem);
	--ms-fs-display:clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	--ms-fs-h1:     clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
	--ms-fs-h2:     clamp(1.3rem, 1.02rem + .9vw, 1.7rem);
	--ms-fs-h3:     clamp(1.12rem, 1rem + .4vw, 1.32rem);
	--ms-fs-h4:     1.02rem;
	--ms-fs-body:   .95rem;
	--ms-fs-small:  .84rem;
	--ms-fs-tiny:   .72rem;
	--ms-fs-micro:  .64rem;

	--ms-lh-tight:  1.22;
	--ms-lh-body:   1.75;   /* Arabic needs air */
	--ms-lh-relaxed:1.95;

	/* ============================================================
	   4. SPACING / RADIUS / BORDER / DENSITY
	   ============================================================ */
	--ms-space-1:  4px;
	--ms-space-2:  8px;
	--ms-space-3:  12px;
	--ms-space-4:  16px;
	--ms-space-5:  20px;
	--ms-space-6:  24px;
	--ms-space-7:  32px;
	--ms-space-8:  40px;
	--ms-space-9:  56px;
	--ms-space-10: 72px;
	--ms-space-11: 96px;

	--ms-radius-xs: 3px;
	--ms-radius-sm: 5px;
	--ms-radius-md: 8px;
	--ms-radius-lg: 12px;
	--ms-radius-xl: 18px;
	--ms-radius-pill: 999px;
	--ms-cut: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); /* precision corner */

	--ms-border-width: 1px;
	--ms-border-strong-width: 1.5px;

	--ms-density-row: 44px;   /* comfortable data row */
	--ms-density-row-compact: 36px;

	/* ============================================================
	   5. MOTION
	   ============================================================ */
	--ms-dur-fast:  120ms;
	--ms-dur-base:  200ms;
	--ms-dur-slow:  340ms;
	--ms-dur-slower:520ms;
	--ms-ease-out:  cubic-bezier(.22, .61, .21, 1);
	--ms-ease-swing:cubic-bezier(.66, 0, .18, 1);
	--ms-ease-in-out: cubic-bezier(.55, .06, .28, .99);

	/* ============================================================
	   6. ATMOSPHERE — restrained precision vocabulary
	   ============================================================ */
	--ms-atmo-grid:      rgba(176, 182, 199, .05);
	--ms-atmo-grid-strong: rgba(176, 182, 199, .085);
	--ms-atmo-sweep:     rgba(255, 106, 43, .16);
	--ms-atmo-glow:      rgba(255, 106, 43, .10);
	--ms-atmo-cobalt:    rgba(92, 145, 201, .12);
	--ms-atmo-vignette:  radial-gradient(120% 90% at 50% 0%, rgba(92, 145, 201, .075), transparent 55%);

	/* ============================================================
	   7. TIERS — presentation capability ladder
	   ============================================================ */
	--ms-tier-standard:   var(--ms-color-cobalt);
	--ms-tier-premium:    var(--ms-color-amber);
	--ms-tier-vip:        var(--ms-color-violet);
	--ms-tier-sponsor:    var(--ms-color-accent);
	--ms-tier-strategic:  var(--ms-color-teal);
	--ms-tier-standard-soft:  var(--ms-color-cobalt-soft);
	--ms-tier-premium-soft:   var(--ms-color-amber-soft);
	--ms-tier-vip-soft:       var(--ms-color-violet-soft);
	--ms-tier-sponsor-soft:   var(--ms-color-orange-soft);
	--ms-tier-strategic-soft: var(--ms-color-teal-soft);

	/* ============================================================
	   8. LAYOUT & Z-SCALE
	   ============================================================ */
	--ms-container:       1400px;
	--ms-container-wide:  1560px;
	--ms-container-narrow:820px;
	--ms-header-h:        58px;
	--ms-subnav-h:        44px;
	--ms-bottomnav-h:     58px;

	--ms-z-header:  100;
	--ms-z-drawer:  200;
	--ms-z-modal:   300;
	--ms-z-palette: 400;
	--ms-z-toast:   500;

	/* Breakpoints reference (not usable in media queries but keep sync):
	   sm 640 · md 900 · lg 1200 · xl 1440 */

	/* Focus */
	--ms-focus-ring: 0 0 0 2px var(--ms-color-bg), 0 0 0 4px var(--ms-color-accent);
}

/* ==============================================================
   LIGHT THEME — a designed surface, not an inversion
   ============================================================== */
[data-theme="light"] {
	--ms-color-bg:            #F2F3F6;
	--ms-color-bg-deep:       #E9EBEF;
	--ms-color-bg-secondary:  #F7F8FA;
	--ms-color-surface:       #FFFFFF;
	--ms-color-surface-raised:#FFFFFF;
	--ms-color-surface-hi:    #F4F6F9;
	--ms-color-overlay:       rgba(20, 23, 30, .44);
	--ms-color-glass:         color-mix(in srgb, #FFFFFF 80%, transparent);

	--ms-color-text:          #171B23;
	--ms-color-text-secondary:#4B5261;
	--ms-color-text-tertiary: #7A8194;
	--ms-color-text-quaternary:#A5ABBD;
	--ms-color-text-inverse:  #FFFFFF;
	--ms-color-text-on-accent:#FFFFFF;

	--ms-color-accent:        #E8500A;
	--ms-color-accent-hover:  #C94307;
	--ms-color-accent-press:  #A93A06;
	--ms-color-accent-soft:   rgba(232, 80, 10, .10);
	--ms-color-accent-softer: rgba(232, 80, 10, .055);
	--ms-color-accent-line:   rgba(232, 80, 10, .34);

	--ms-color-cobalt:        #2F6EA8;
	--ms-color-cobalt-soft:   rgba(47, 110, 168, .11);
	--ms-color-teal:          #14877D;
	--ms-color-teal-soft:     rgba(20, 135, 125, .10);
	--ms-color-violet:        #6455C8;
	--ms-color-violet-soft:   rgba(100, 85, 200, .11);
	--ms-color-amber:         #B87A08;
	--ms-color-amber-soft:    rgba(184, 122, 8, .11);
	--ms-color-crimson:       #C43333;
	--ms-color-crimson-soft:  rgba(196, 51, 51, .10);
	--ms-color-green:         #258A4E;
	--ms-color-green-soft:    rgba(37, 138, 78, .11);
	--ms-color-orange-soft:   rgba(232, 80, 10, .10);

	--ms-color-border:        rgba(23, 27, 35, .12);
	--ms-color-border-strong: rgba(23, 27, 35, .24);
	--ms-color-hairline:      rgba(23, 27, 35, .07);

	--ms-color-neutral-1:     #EDEFF3;
	--ms-color-neutral-2:     #D8DCE4;
	--ms-color-neutral-3:     #AEB4C2;

	--ms-shadow-1: 0 1px 2px rgba(20, 24, 32, .08);
	--ms-shadow-2: 0 6px 18px -6px rgba(20, 24, 32, .14), 0 2px 6px -2px rgba(20, 24, 32, .08);
	--ms-shadow-3: 0 18px 50px -12px rgba(20, 24, 32, .20), 0 6px 16px -8px rgba(20, 24, 32, .10);
	--ms-shadow-accent: 0 0 0 1px var(--ms-color-accent-line), 0 8px 28px -12px rgba(232, 80, 10, .25);
	--ms-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

	--ms-atmo-grid:      rgba(23, 27, 35, .05);
	--ms-atmo-grid-strong: rgba(23, 27, 35, .08);
	--ms-atmo-sweep:     rgba(232, 80, 10, .12);
	--ms-atmo-glow:      rgba(232, 80, 10, .07);
	--ms-atmo-cobalt:    rgba(47, 110, 168, .09);
	--ms-atmo-vignette:  radial-gradient(120% 90% at 50% 0%, rgba(47, 110, 168, .05), transparent 55%);
}

/* System preference sync when no explicit choice */
@media (prefers-color-scheme: light) {
	[data-theme="system"] {
		--ms-color-bg:            #F2F3F6;
		--ms-color-bg-deep:       #E9EBEF;
		--ms-color-bg-secondary:  #F7F8FA;
		--ms-color-surface:       #FFFFFF;
		--ms-color-surface-raised:#FFFFFF;
		--ms-color-surface-hi:    #F4F6F9;
		--ms-color-overlay:       rgba(20, 23, 30, .44);
		--ms-color-glass:         color-mix(in srgb, #FFFFFF 80%, transparent);
		--ms-color-text:          #171B23;
		--ms-color-text-secondary:#4B5261;
		--ms-color-text-tertiary: #7A8194;
		--ms-color-text-quaternary:#A5ABBD;
		--ms-color-text-inverse:  #FFFFFF;
		--ms-color-text-on-accent:#FFFFFF;
		--ms-color-accent:        #E8500A;
		--ms-color-accent-hover:  #C94307;
		--ms-color-accent-press:  #A93A06;
		--ms-color-accent-soft:   rgba(232, 80, 10, .10);
		--ms-color-accent-softer: rgba(232, 80, 10, .055);
		--ms-color-accent-line:   rgba(232, 80, 10, .34);
		--ms-color-border:        rgba(23, 27, 35, .12);
		--ms-color-border-strong: rgba(23, 27, 35, .24);
		--ms-color-hairline:      rgba(23, 27, 35, .07);
		--ms-shadow-1: 0 1px 2px rgba(20, 24, 32, .08);
		--ms-shadow-2: 0 6px 18px -6px rgba(20, 24, 32, .14), 0 2px 6px -2px rgba(20, 24, 32, .08);
		--ms-shadow-3: 0 18px 50px -12px rgba(20, 24, 32, .20), 0 6px 16px -8px rgba(20, 24, 32, .10);
	}
}

/* ==============================================================
   MOTION SAFETY
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ms-dur-fast: 0ms;
		--ms-dur-base: 0ms;
		--ms-dur-slow: 0ms;
		--ms-dur-slower: 0ms;
	}
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==============================================================
   LEGACY COMPAT SHIM — --msi-* aliases map onto the new system.
   Existing sheets keep working while consumption migrates to --ms-*.
   ============================================================== */
:root {
	--msi-bg: var(--ms-color-bg);
	--msi-bg-secondary: var(--ms-color-bg-secondary);
	--msi-bg-deep: var(--ms-color-bg-deep);
	--msi-surface: var(--ms-color-surface);
	--msi-surface-raised: var(--ms-color-surface-raised);
	--msi-surface-hi: var(--ms-color-surface-hi);
	--msi-sunken: var(--ms-color-bg-deep);
	--msi-overlay: var(--ms-color-overlay);
	--msi-glass: var(--ms-color-glass);
	--msi-text: var(--ms-color-text);
	--msi-text-secondary: var(--ms-color-text-secondary);
	--msi-text-tertiary: var(--ms-color-text-tertiary);
	--msi-text-quaternary: var(--ms-color-text-quaternary);
	--msi-accent: var(--ms-color-accent);
	--msi-accent-hover: var(--ms-color-accent-hover);
	--msi-accent-soft: var(--ms-color-accent-soft);
	--msi-accent-softer: var(--ms-color-accent-softer);
	--msi-accent-line: var(--ms-color-accent-line);
	--msi-cobalt: var(--ms-color-cobalt);
	--msi-cobalt-soft: var(--ms-color-cobalt-soft);
	--msi-teal: var(--ms-color-teal);
	--msi-teal-soft: var(--ms-color-teal-soft);
	--msi-violet: var(--ms-color-violet);
	--msi-violet-soft: var(--ms-color-violet-soft);
	--msi-amber: var(--ms-color-amber);
	--msi-amber-soft: var(--ms-color-amber-soft);
	--msi-crimson: var(--ms-color-crimson);
	--msi-crimson-soft: var(--ms-color-crimson-soft);
	--msi-green: var(--ms-color-green);
	--msi-green-soft: var(--ms-color-green-soft);
	--msi-success: var(--ms-color-success);
	--msi-success-soft: var(--ms-color-success-soft);
	--msi-warning: var(--ms-color-warning);
	--msi-warning-soft: var(--ms-color-warning-soft);
	--msi-danger: var(--ms-color-danger);
	--msi-danger-soft: var(--ms-color-danger-soft);
	--msi-border: var(--ms-color-border);
	--msi-border-strong: var(--ms-color-border-strong);
	--msi-hairline: var(--ms-color-hairline);
	--msi-neutral-1: var(--ms-color-neutral-1);
	--msi-neutral-2: var(--ms-color-neutral-2);
	--msi-neutral-3: var(--ms-color-neutral-3);
	--msi-shadow-1: var(--ms-shadow-1);
	--msi-shadow-2: var(--ms-shadow-2);
	--msi-shadow-3: var(--ms-shadow-3);
	--msi-font-ui: var(--ms-font-ui);
	--msi-font-display: var(--ms-font-display);
	--msi-font-body: var(--ms-font-body);
	--msi-font-mono: var(--ms-font-mono);
	--msi-ar-scale: var(--ms-ar-scale);
	--msi-fs-hero: var(--ms-fs-hero);
	--msi-fs-display: var(--ms-fs-display);
	--msi-fs-h1: var(--ms-fs-h1);
	--msi-fs-h2: var(--ms-fs-h2);
	--msi-fs-h3: var(--ms-fs-h3);
	--msi-fs-h4: var(--ms-fs-h4);
	--msi-fs-body: var(--ms-fs-body);
	--msi-fs-small: var(--ms-fs-small);
	--msi-fs-tiny: var(--ms-fs-tiny);
	--msi-fs-micro: var(--ms-fs-micro);
	--msi-lh-tight: var(--ms-lh-tight);
	--msi-lh-body: var(--ms-lh-body);
	--msi-lh-relaxed: var(--ms-lh-relaxed);
	--msi-space-1: var(--ms-space-1);
	--msi-space-2: var(--ms-space-2);
	--msi-space-3: var(--ms-space-3);
	--msi-space-4: var(--ms-space-4);
	--msi-space-5: var(--ms-space-5);
	--msi-space-6: var(--ms-space-6);
	--msi-space-7: var(--ms-space-7);
	--msi-space-8: var(--ms-space-8);
	--msi-space-9: var(--ms-space-9);
	--msi-space-10: var(--ms-space-10);
	--msi-space-11: var(--ms-space-11);
	--msi-radius-xs: var(--ms-radius-xs);
	--msi-radius-sm: var(--ms-radius-sm);
	--msi-radius-md: var(--ms-radius-md);
	--msi-radius-lg: var(--ms-radius-lg);
	--msi-radius-xl: var(--ms-radius-xl);
	--msi-radius-pill: var(--ms-radius-pill);
	--msi-cut: var(--ms-cut);
	--msi-dur-fast: var(--ms-dur-fast);
	--msi-dur-base: var(--ms-dur-base);
	--msi-dur-slow: var(--ms-dur-slow);
	--msi-dur-slower: var(--ms-dur-slower);
	--msi-ease-out: var(--ms-ease-out);
	--msi-ease-swing: var(--ms-ease-swing);
	--msi-tier-standard: var(--ms-tier-standard);
	--msi-tier-premium: var(--ms-tier-premium);
	--msi-tier-vip: var(--ms-tier-vip);
	--msi-tier-sponsor: var(--ms-tier-sponsor);
	--msi-tier-strategic: var(--ms-tier-strategic);
	--msi-tier-standard-soft: var(--ms-tier-standard-soft);
	--msi-tier-premium-soft: var(--ms-tier-premium-soft);
	--msi-tier-vip-soft: var(--ms-tier-vip-soft);
	--msi-tier-sponsor-soft: var(--ms-tier-sponsor-soft);
	--msi-tier-strategic-soft: var(--ms-tier-strategic-soft);
	--msi-container: var(--ms-container);
	--msi-container-narrow: var(--ms-container-narrow);
	--msi-header-h: var(--ms-header-h);
	--msi-subnav-h: var(--ms-subnav-h);
	--msi-z-header: var(--ms-z-header);
	--msi-z-drawer: var(--ms-z-drawer);
	--msi-z-modal: var(--ms-z-modal);
	--msi-z-palette: var(--ms-z-palette);
	--msi-z-toast: var(--ms-z-toast);
}