/* ==============================================================================
   FOX TOOLS -- Design Tokens (foundation layer, prefix --fx-)
   Direction: premium dark surface, technical BLUE for navigation / analysis /
   primary UI, RED reserved for warnings, critical states and selective accents.
   Carried over from the approved design rules (README-DESIGN.md): brand red
   #EE0A1E, tier colours (bronze < silver < gold), grey glossy buttons (not
   red), calm static lighting (no pulsing glow).
   Additive only: nothing here redefines a token used by fox-design.css.
   ============================================================================== */
:root {
  /* ---- Surfaces (blue-tinted near-black) ---- */
  --fx-bg:          #090B10;
  --fx-bg-elev:     #0C0F15;
  --fx-surface:     #10141C;
  --fx-surface-2:   #161B25;
  --fx-surface-3:   #1C2230;
  --fx-line:        #1E2430;
  --fx-line-strong: #2A3242;

  /* ---- Text ---- */
  --fx-text:   #F2F5FA;
  --fx-text-2: #A9B2C3;
  --fx-text-3: #8A93A5;

  /* ---- Technical blue: navigation, analysis, primary interface ---- */
  --fx-blue:        #4FA8FF;
  --fx-blue-600:    #2F86E8;
  --fx-blue-700:    #1F63B8;
  --fx-blue-soft:   rgba(79, 168, 255, 0.12);
  --fx-blue-softer: rgba(79, 168, 255, 0.06);
  --fx-blue-line:   rgba(79, 168, 255, 0.38);

  /* ---- Red: warnings, critical states, selective accents (brand red kept) ---- */
  --fx-red:        #EE0A1E;
  --fx-red-text:   #FF6B76;
  --fx-red-soft:   rgba(238, 10, 30, 0.12);
  --fx-red-line:   rgba(238, 10, 30, 0.42);

  /* ---- Semantic states ---- */
  --fx-green:      #7ED6B5;
  --fx-green-soft: rgba(126, 214, 181, 0.12);
  --fx-amber:      #F5B36B;
  --fx-amber-soft: rgba(245, 179, 107, 0.12);

  /* ---- Tiers (approved order: bronze -> silver -> gold) ---- */
  --fx-bronze: #E9A56A;
  --fx-silver: #DDE2EA;
  --fx-gold:   #F4D06F;

  /* ---- Typography ---- */
  --fx-font-body:    'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --fx-font-display: 'Readex Pro', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --fx-fs-xs:   0.8125rem;   /* 13 */
  --fx-fs-sm:   0.9375rem;   /* 15 */
  --fx-fs-md:   1rem;        /* 16 */
  --fx-fs-lg:   1.125rem;    /* 18 */
  --fx-fs-xl:   1.375rem;    /* 22 */
  --fx-fs-2xl:  clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);  /* page title */
  --fx-lh-body: 1.75;
  --fx-lh-tight: 1.3;

  /* ---- Spacing (4px base) ---- */
  --fx-s-1: 4px;  --fx-s-2: 8px;   --fx-s-3: 12px; --fx-s-4: 16px;
  --fx-s-5: 20px; --fx-s-6: 24px;  --fx-s-8: 32px; --fx-s-10: 40px; --fx-s-12: 48px;
  --fx-gutter: clamp(16px, 4vw, 40px);

  /* ---- Radii ---- */
  --fx-r-sm: 10px; --fx-r-md: 14px; --fx-r-lg: 20px; --fx-r-pill: 999px;

  /* ---- Elevation (static, calm) ---- */
  --fx-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.7);
  --fx-shadow-2: 0 24px 48px -16px rgba(0,0,0,0.75);
  --fx-focus:    0 0 0 2px var(--fx-bg), 0 0 0 4px var(--fx-blue);

  /* ---- Motion ---- */
  --fx-dur-fast: 120ms; --fx-dur: 200ms; --fx-dur-slow: 320ms;
  --fx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Layout ---- */
  --fx-sidebar-w: 272px;
  --fx-topbar-h: 68px;
  --fx-content-max: 1120px;
  --fx-z-topbar: 20; --fx-z-scrim: 40; --fx-z-drawer: 50; --fx-z-toast: 100;
}