/* ════════════════════════════════════════════════════════════════
   ARK SYSTEMS — Canonical Design Tokens (ui-core)
   ----------------------------------------------------------------
   SINGLE SOURCE OF TRUTH. Promoted verbatim from the proven New
   Vision premium token set (nvs2/src/styles/tokens.css) so every
   app inherits one contract. Token NAMES are stable forever; only
   VALUES may be re-tuned. The plain hex line is the fallback for
   browsers without OKLCH (older Android WebView / Safari <15.4);
   the oklch() line wins everywhere modern. Never reorder the pair.

   Themes:
     :root                       → light "customer" base (default)
     [data-theme="operational"]  → dark internal-tool theme (shell,
                                    war room) — SAME variable names.
     [data-theme="<market>"]     → regional accent overrides.

   Consume:  @import "ui-core/tokens/tokens.css";  (or <link>)
   Doctrine: docs/ARK_DESIGN_SYSTEM.md · docs/ARK_THEME_RULES.md
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Neutral canvas — warm near-white with a whisper of jade ── */
  --bg:       #fdfefd;
  --bg:       oklch(0.992 0.003 158);
  --surface:  #f5f9f7;
  --surface:  oklch(0.975 0.006 162);
  --surface2: #edf3f0;
  --surface2: oklch(0.955 0.009 162);
  --border:   #dde7e2;
  --border:   oklch(0.902 0.012 162);
  --border2:  #c6d6cf;
  --border2:  oklch(0.842 0.018 162);

  /* ── Brand jade — New Vision green, deepened + restrained ── */
  --green:    #1f6e4b;
  --green:    oklch(0.505 0.108 159);
  --green2:   #14543a;
  --green2:   oklch(0.405 0.095 159);
  --green3:   #2a8460;
  --green3:   oklch(0.575 0.108 159);
  --green4:   #3fa074;
  --green4:   oklch(0.66 0.112 158);

  /* ── Accents — refined, restrained ── */
  --orange:   #c0852e;
  --orange:   oklch(0.715 0.118 76);
  --red:      #c1362b;
  --red:      oklch(0.555 0.178 27);
  --blue:     #1f5fae;
  --blue:     oklch(0.525 0.122 252);

  /* ── Ink ── */
  --text:     #16261f;
  --text:     oklch(0.255 0.022 161);
  --muted:    #5f726a;
  --muted:    oklch(0.535 0.016 161);
  --muted2:   #415349;
  --muted2:   oklch(0.41 0.022 161);

  /* ── Semantic role aliases (use these in NEW components so intent
        is explicit; they resolve to the brand tokens above) ── */
  --accent:        var(--green);
  --accent-strong: var(--green2);
  --accent-soft:   var(--green4);
  --success:       var(--green3);
  --warning:       var(--orange);
  --danger:        var(--red);
  --info:          var(--blue);

  /* ── Typography — China/GFW-safe system stacks (no network fetch) ── */
  --font-display: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI",
                  system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-main:    system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
                  "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-mono:    "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono",
                  ui-monospace, monospace;
  --tracking-tight: -0.018em;
  --tracking-snug:  -0.008em;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.10em;

  /* ── Radius scale ── */
  --radius-sm:   8px;
  --radius:     13px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* ── Elevation — soft, layered, neutral ink shadows ── */
  --shadow-xs:  0 1px 2px rgba(18,38,28,.05);
  --shadow-sm:  0 2px 6px rgba(18,38,28,.05), 0 6px 16px rgba(18,38,28,.05);
  --shadow-md:  0 4px 12px rgba(18,38,28,.07), 0 14px 32px rgba(18,38,28,.07);
  --shadow-lg:  0 8px 20px rgba(18,38,28,.09), 0 24px 56px rgba(18,38,28,.11);
  --shadow-brand: 0 14px 34px rgba(20,84,58,.20);
  --ring: 0 0 0 3px rgba(31,110,75,.16);

  /* ── Spacing rhythm (4-pt) ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ── Type scale ── */
  --fs-display: clamp(34px, 5.4vw, 62px);
  --fs-h2:      clamp(24px, 2.6vw, 34px);
  --fs-stat:    clamp(30px, 3.4vw, 44px);
  --fs-eyebrow: 11px;
  --lead: 1.06;

  /* ── Motion (transform/opacity only · ease-out · never bounce) ── */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(0.16,1,0.3,1);
  --dur-1: .12s;  --dur-2: .2s;  --dur-3: .35s;  --dur-4: .5s;

  /* ── Z-index semantic scale ── */
  --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-drawer: 1200;
  --z-modal-backdrop: 1300; --z-modal: 1400; --z-toast: 1500; --z-tooltip: 1600;
}

/* ════════════════════════════════════════════════════════════════
   OPERATIONAL DARK THEME — internal tools (ARK Shell, War Room).
   Same variable names; near-black canvas with cool cast + jade/gold.
   (Starter map — full dark polish pass tracked in plan Phase 5.)
   ════════════════════════════════════════════════════════════════ */
[data-theme="operational"] {
  --bg:       #07090d;
  --bg:       oklch(0.16 0.012 255);
  --surface:  #11151e;
  --surface:  oklch(0.22 0.016 255);
  --surface2: #171c28;
  --surface2: oklch(0.26 0.018 255);
  --border:   #232b3a;
  --border:   oklch(0.32 0.02 255);
  --border2:  #2e3850;
  --border2:  oklch(0.38 0.022 255);

  --green:    #34d399;  --green:  oklch(0.80 0.15 162);
  --green2:   #0f6b4d;  --green2: oklch(0.50 0.10 162);
  --green3:   #56d9a8;  --green3: oklch(0.83 0.13 162);
  --green4:   #8fe9c6;  --green4: oklch(0.88 0.10 162);
  --orange:   #d8b15a;  --orange: oklch(0.80 0.11 88);
  --red:      #fb7185;  --red:    oklch(0.72 0.16 18);
  --blue:     #56b6f2;  --blue:   oklch(0.78 0.11 235);

  --text:     #eef2f8;  --text:   oklch(0.97 0.005 255);
  --muted:    #aeb8c8;  --muted:  oklch(0.80 0.02 255);
  --muted2:   #6b7689;  --muted2: oklch(0.60 0.02 255);

  --shadow-xs:  0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:  0 2px 6px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.5);
  --shadow-md:  0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:  0 24px 60px -24px rgba(0,0,0,.85);
  --ring: 0 0 0 3px rgba(86,217,168,.22);
}

/* ════════════════════════════════════════════════════════════════
   Market theme overrides — applied as data-theme on <html>.
   ════════════════════════════════════════════════════════════════ */
[data-theme="global"]        { --theme-primary: #16261f; --theme-action: #2a8460; --theme-bg: #fbfdfc; }
[data-theme="middle-east"]   { --theme-primary: #18496a; --theme-action: #1f6e4b; --theme-bg: #f1f5f8; }
[data-theme="north-africa"]  { --theme-primary: #16261f; --theme-action: #b08512; --theme-bg: #fbfdfc; }
[data-theme="west-africa"]   { --theme-primary: #045f39; --theme-action: #1f6e4b; --theme-bg: #f0f8f4; }
[data-theme="central-asia"]  { --theme-primary: #1a2470; --theme-action: #2a8460; --theme-bg: #f1f2fb; }
[data-theme="southeast-asia"]{ --theme-primary: #a51d1d; --theme-action: #2a8460; --theme-bg: #fdf5f5; }

/* Respect reduced motion globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}