/* ─────────────────────────────────────────────────────────────
   Design Tokens — Microsoft Fluent 2
   Neutral grayscale surfaces, Fluent blue accent, small radii,
   depth via stroke (1 px borders) not shadows. Segoe UI first.
   Light + dark variants. All variable NAMES are preserved so
   site.css and downstream views keep working.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Brand (Fluent blue ramp) ──────────────────────────── */
  --brand-50:  #eff6fc;
  --brand-100: #deecf9;
  --brand-200: #c7e0f4;
  --brand-300: #71afe5;
  --brand-400: #2899f5;
  --brand-500: #0078d4;
  --brand-600: #106ebe;
  --brand-700: #005a9e;
  --brand-gradient:        #0078d4;
  --brand-gradient-soft:   rgba(0, 120, 212, 0.10);
  --brand-gradient-strong: #106ebe;

  /* ── Status colors (Fluent semantics) ──────────────────── */
  --accent-cyan:    #00b7c3;
  --accent-pink:    #d13438;
  --accent-emerald: #107c10;
  --accent-amber:   #f7630c;
  --accent-rose:    #d13438;
  --accent-violet:  #5c2e91;

  /* Solid color blocks (kept as variables for KPI icons etc.) */
  --grad-orange:  #f7630c;
  --grad-violet:  #5c2e91;
  --grad-amber:   #ca5010;
  --grad-emerald: #107c10;
  --grad-rose:    #d13438;
  --grad-cyan:    #038387;

  /* ── Soft tint surfaces (badge backgrounds) ────────────── */
  --soft-mint:        #dff6dd;
  --soft-mint-ink:    #107c10;
  --soft-sky:         #deecf9;
  --soft-sky-ink:     #005a9e;
  --soft-peach:       #fed9cc;
  --soft-peach-ink:   #8a3b00;
  --soft-rose:        #fde7e9;
  --soft-rose-ink:    #a4262c;
  --soft-lavender:    #e8dcfc;
  --soft-lavender-ink:#5c2e91;
  --soft-sand:        #fff4ce;
  --soft-sand-ink:    #7a4a00;

  /* ── Backdrops ─────────────────────────────────────────── */
  --bg-app:        #faf9f8;     /* Fluent layer-1 */
  --bg-gradient:   none;
  --surface-1:     #ffffff;
  --surface-2:     #f5f5f5;
  --surface-3:     #ffffff;
  --surface-inset: #f3f2f1;     /* Fluent neutralBackground2 */
  --border-soft:   #ebebeb;     /* Fluent neutralStroke2 */
  --border-line:   #d1d1d1;     /* Fluent neutralStroke1 */
  --border-strong: #8a8886;

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:   #242424;
  --text-secondary: #424242;
  --text-muted:     #616161;
  --text-inverse:   #ffffff;

  /* ── Status semantics ──────────────────────────────────── */
  --status-info:    #0078d4;
  --status-success: #107c10;
  --status-warning: #f7630c;
  --status-danger:  #d13438;

  /* ── Shadows (Fluent elevation — very subtle) ─────────── */
  --shadow-sm: 0 0 2px rgba(0, 0, 0, .12), 0 0 0 transparent;
  --shadow:    0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .08);
  --shadow-md: 0 0 2px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .10);
  --shadow-lg: 0 0 2px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .14);
  --shadow-brand: 0 1px 2px rgba(0, 90, 158, .18);

  /* ── Radius (Fluent: small + crisp) ────────────────────── */
  --radius-sm:   2px;
  --radius:      4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-pill: 999px;

  /* ── Spacing scale ─────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Font (Fluent default = Segoe UI Variable) ─────────── */
  --font-sans:    "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-arabic:  "Segoe UI", "Noto Sans Arabic", "Cairo", "Tajawal", system-ui, sans-serif;

  /* ── Focus ring (Fluent uses 2 px brand outline) ────────── */
  --ring: 0 0 0 2px var(--brand-500);
}

[data-theme="dark"] {
  --bg-app:        #1f1f1f;
  --bg-gradient:   none;
  --surface-1:     #2b2b2b;
  --surface-2:     #292929;
  --surface-3:     #313131;
  --surface-inset: #242424;
  --border-soft:   #3d3d3d;
  --border-line:   #515151;
  --border-strong: #757575;

  --text-primary:   #ffffff;
  --text-secondary: #d6d6d6;
  --text-muted:     #adadad;
  --text-inverse:   #242424;

  --brand-500: #2899f5;
  --brand-600: #4ba8f7;
  --brand-700: #71afe5;

  --soft-mint:        #0b3b0b;
  --soft-mint-ink:    #6ccb6c;
  --soft-sky:         #0c3a5b;
  --soft-sky-ink:     #6bbbf5;
  --soft-peach:       #4a1f0a;
  --soft-peach-ink:   #ff9b69;
  --soft-rose:        #4a1213;
  --soft-rose-ink:    #f1707c;
  --soft-lavender:    #2c1a4b;
  --soft-lavender-ink:#c5a6ff;
  --soft-sand:        #3d2c00;
  --soft-sand-ink:    #ffd866;

  --shadow-sm: 0 0 2px rgba(0, 0, 0, .50);
  --shadow:    0 0 2px rgba(0, 0, 0, .50), 0 2px 4px rgba(0, 0, 0, .35);
  --shadow-md: 0 0 2px rgba(0, 0, 0, .50), 0 4px 8px rgba(0, 0, 0, .45);
  --shadow-lg: 0 0 2px rgba(0, 0, 0, .50), 0 8px 16px rgba(0, 0, 0, .55);
}

/* Arabic locale picks a script-friendly font */
[lang="ar"] body { font-family: var(--font-arabic); }