/* Design tokens — 02-AGENT-DESIGN.md §2. Single source of truth for color,
   type, spacing, radius, shadow and motion across every portal.

   2026 redesign (issue #316): moved off the teal+amber, dark-sidebar,
   glass-over-gradient look to a clean, neutral, high-contrast SaaS surface
   inspired by the attached reference — near-black ("ink") primary actions,
   a calm neutral-slate canvas, crisp hairline-bordered flat cards, and a
   single restrained indigo accent that reads well in both LTR (AZ/RU/EN) and
   RTL (AR/UR) layouts for the UAE + Azerbaijan markets. Token *names* are kept
   stable (`--color-ink`, `--color-amber`, …) so every component that already
   references them re-themes automatically; only their values changed. */
:root {
  /* Color — primary "ink" is now a true near-black neutral (used for primary
     buttons, headings and emphasis) rather than the old teal. */
  --color-ink: #1B1C1F;
  --color-ink-700: #2E3036;
  --color-ink-900: #0E0F12;

  /* Accent — a single restrained indigo. Kept under the historical
     `--color-amber*` names so the many components referencing them (focus ring,
     active nav, stat accents, links) re-theme without edits. */
  --color-amber: #4F46E5;
  --color-amber-600: #4338CA;
  --color-terracotta: #DC2626;

  /* Surfaces — flat and solid: a soft neutral canvas with white cards and a
     light, cool hairline. */
  --color-surface: #F5F6F8;
  --color-card: #FFFFFF;
  --color-hairline: #E5E7EB;
  --color-text: #1F2329;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;
  --color-danger: #DC2626;
  --color-danger-surface: #FDECEC;
  --color-success: #16A34A;
  --color-success-surface: #EAF7EF;

  /* Type */
  /* "IBM Plex Sans Arabic" sits right behind the Latin face as a per-glyph
     fallback: IBM Plex Sans ships no Arabic-script glyphs, so without it any
     Arabic/Urdu text on an LTR page (an Arabic project or resident name in
     the English portal, say) drops to whatever the OS picks instead of the
     brand face. RTL pages go further and lead with the Arabic face — see
     `[dir="rtl"] body` in main.css and `[dir="rtl"] .hp` in home.css. */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Same per-glyph reasoning for the mono stack: none of the mono faces
     carry Arabic script, so an Arabic/Urdu label inside a mono context (the
     landing page's ledger mock, an RTL value in a figures column) picks up
     the brand Arabic face instead of an OS-dependent fallback. Latin text
     and digits still resolve to IBM Plex Mono first. */
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* Card surfaces. The redesign is flat, so "glass" now resolves to a solid
     white card with a neutral hairline — the tokens are kept so components that
     opted into the glass fallback (`.card`, `.stat-card`) stay valid, they just
     render as clean opaque cards now. */
  --color-glass-surface: #FFFFFF;
  --color-glass-border: var(--color-hairline);
  --blur-glass: 0px;

  /* Spacing (4pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radius & shadow — crisp, low-elevation geometry: tighter corners than a
     consumer app so the surfaces read precise/professional, per the
     reference's near-square cards (issue #316). */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12);

  /* Motion */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;

  /* Tokenized focus ring (accent indigo). */
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.30);
  --focus-ring-offset: 2px;
  /* Semantic info/warning pairs, matching the success/danger surface pattern. */
  --color-warning: #B45309;
  --color-warning-surface: #FEF3E2;
  --color-info: var(--color-amber-600);
  --color-info-surface: #EEF0FF;
  /* Elevation-on-hover shadow for lifted cards. */
  --shadow-hover: 0 8px 20px rgba(16, 24, 40, 0.10);

  /* Sidebar navigation surface tokens. The sidebar is now a LIGHT rail (white
     with a hairline) rather than the old dark gradient, so these describe
     dark-ink text on light surfaces — the active item gets a soft accent-tinted
     pill plus an accent left-border, mirroring the reference. */
  --nav-fg: #52555E;
  --nav-fg-hover: #16181D;
  --nav-hover-surface: #F1F2F5;
  --nav-active-fg: #1B1C1F;
  --nav-active-surface: #EEF0FF;
  --nav-active-glow: none;
  --sidebar-width: 248px;
}